Operations affecting multiple images

ABSTRACT

Some embodiments provide an image-viewing application that displays a first selection indication for first and second selected thumbnails in a thumbnail display area while displaying, in an image display area, first and second images corresponding to the selected thumbnails. The application receives a selection of the displayed first image through the image display area. In response to the selection, the application displays only the first image in the image display area and displays a second selection indication for the first thumbnail in the thumbnail display area while maintaining the first selection indication for the second thumbnail. Some embodiments receive a horizontal swipe gesture over the first image in the image display area, and in response display the second image in the image display area. Some embodiments receive a vertical swipe gesture over the first image in the image display area, and in response remove the selection of the first thumbnail.

CLAIM OF BENEFIT TO PRIOR APPLICATIONS

This application claims the benefit of U.S. Provisional Application61/607,550, entitled “Application for Viewing Images”, filed Mar. 6,2012. U.S. Application 61/607,550 is incorporated herein by reference.

BACKGROUND

Digital image editing and viewing applications provide photographers,both professional and amateur, with tools to both organize and edittheir photos. These applications give users the ability to organizecollections of photos and to modify various image properties of thephotos in a variety of ways.

In the modern world, touchscreen devices are becoming ubiquitous. Manytablets and smartphones on the market use touchscreens, and many peopleown such a touchscreen device. In addition, many users both takephotographs with their portable touchscreen devices and load photographsfrom other sources (e.g., digital cameras) onto their portabletouchscreen devices. As such, an application is needed for viewing,organizing, and editing photos that is adapted to the unique controlsavailable for a touchscreen device.

BRIEF SUMMARY

Some embodiments of the invention provide a novel application forviewing and working with images. In some embodiments, the applicationoperates in multiple different modes, with different graphical userinterfaces (GUIs) for the different modes. For instance, in someembodiments, the application operates on a touch device in bothleft-handed and right-handed modes. In addition to the different GUIsfor the different modes, some embodiments present specific userinterface tools in different manners (e.g., different orientations) inthe different modes. The application provides various features forworking with one or multiple images. For instance, some embodimentsenable various methods for viewing multiple different images, including(i) novel touch interactions for selecting multiple items and (ii) novelmethods for identifying similar images from a group of images. Inaddition, the application provides various novel interactions forworking with multiple selected images, such as interactions for cyclingthrough images and tagging images.

As mentioned, the application of some embodiments provides multipledifferent modes (e.g., left-handed and right-handed modes). Someembodiments switch between modes according to the location in the GUI ofa particular GUI item. When switching between modes, some embodimentspreserve a relationship in the GUI (e.g., an order) of a first set ofGUI items while modifying a relationship of a second set of GUI items.In addition, the application of some embodiments presents certain toolsin different manners (e.g., orientations) when the tools are activatedin the different modes.

In some embodiments, the application provides a user-interface mechanismfor switching between the modes. For example, the GUI of someembodiments includes a thumbnail display area that displays thumbnailsof a group of images and an image display area that displays larger (andin some cases, editable) versions of selected images. In someembodiments, the thumbnail display area is moveable, and the applicationswitches between left- and right-handed modes based on the location inthe GUI to which the thumbnail display area is moved (e.g., left-handedmode when the thumbnail display area is on the right side of the GUI andright-handed mode when the thumbnail display area is on the left side ofthe GUI).

When the application switches between the two modes, some embodimentspreserve the order of a first set of GUI items while changing the orderof a second set of GUI items. Specifically, the application preservesthe order of a set of GUI items associated with various editing tools tomaintain an order in which the editing tools are typically utilized. Onthe other hand, the application reverses the order of a second set ofGUI items in order to keep the GUI items in the same location relativeto the thumbnail display area.

In addition, the image viewing, editing, and organization applicationprovides certain GUI tools in different manners in the different modes.For instance, some embodiments display specific tools in differentorientations depending on whether the application is in left- orright-handed mode. One such specific tool is a zoom tool that magnifiesa particular area of the image display area. The zoom tool of someembodiments is a circular magnifier capable of varying degrees ofmagnification. To modify the magnification, the user performs a rotationgesture of two separate touch inputs (e.g., with the thumb and indexfinger). When operating in right-handed mode, the application displaysmagnification information on the left side of the magnifier, and viceversa when operating in left-handed mode. This prevents the user's handfrom blocking the view of the magnification information on the zoomtool. Furthermore, some embodiments switch the directions of rotationfor zooming in and out between the two different modes.

As mentioned, in some embodiments, the thumbnail display area ismoveable between two different sides of the application GUI. Inaddition, the application enables the user to move the thumbnail displayarea on and off the application GUI via swipe gestures (e.g., right andleft swipe gestures on a touchscreen). Furthermore, users can modify thesize (and number of columns of thumbnails) of the thumbnail display bymoving the boundary between the thumbnail display area and the imagedisplay area with a drag gesture on the touchscreen.

In addition to operating in different modes, the image viewing, editing,and organization application provides a variety of novel operations andinteractions for viewing and working with images. For instance, someembodiments enable several different operations for selecting multipleimages to display in the image display area. One such operation involvessimultaneous selection (e.g., via two different touch inputs) of firstand second thumbnails in the thumbnail display area in order to selectthe first and second thumbnails and all thumbnails in between. Inresponse to such a block selection, the application displays all of theimages corresponding to the selected thumbnails in the image displayarea.

Some embodiments additionally differentiate between different types ofthumbnail selection inputs. For example, when a user selects aparticular thumbnail in a first manner (e.g., a tap on a touchscreen ora single click), the application selects only the particular thumbnailand displays only its corresponding image in the display area. However,when a first thumbnail is already selected and a user selects a secondthumbnail in a second manner (e.g., with a press and hold on atouchscreen or a click and hold), the application maintains theselection of the first thumbnail while selecting the second thumbnail.The application displays both the first and second images (and any otherselected images) in the image display area. In this manner, someembodiments allow the user to add any number of images to the imagedisplay area.

Furthermore, the image viewing, editing, and organization application ofsome embodiments can display all images that are similar to a selectedimage according to a particular set of criteria. When a user selects animage in a third manner (e.g., via a double tap on a touchscreen, adouble-click, etc.), the application compares all images in a collectionof associated images (e.g., the images whose thumbnails are eligible fordisplay in the thumbnail display area) to the selected image, andidentifies which of the images are within a threshold similarity to theselected image according to the particular set of criteria. Someembodiments generate histograms of the pixels of an image (e.g., basedon color, texture, and gradient values for the pixels) and compare thehistograms to identify similar images. In some embodiments, theapplication generates different histograms for different regions of theimages and compares the histograms of corresponding regions. The imagesare divided into the regions in such a way that some pixels are part ofmultiple regions while other pixels are part of only one region. Thisenables the application to give greater consideration to the pixels thatare more indicative of the content of the image (e.g., those in thecenter) in making the comparison between two images.

When displaying multiple images in the image display area, someembodiments maintain a constant visual weight between the differentimages. That is, rather than try to fill all of the space in the imagedisplay area by displaying the images as different sizes, theapplication displays each image as the same size irrespective of thedimensions of the image. In order to keep the visual weighting constantbetween different images, some embodiments calculate the average aspectratio of all of the images to display in the image display area, thenidentify an optimal division of the image display area into the correctnumber of regions having the average aspect ratio. Within these regions,the application then displays the images such that each image isdisplayed using the same number of pixels.

Once multiple thumbnails are selected and multiple images displayed inthe image display area, some embodiments provide various novelinteractions for viewing and interacting with the images. For instance,a user can perform a selection operation (e.g., a tap on a touchscreen,a mouse click) on one of the displayed images. Some embodiments displayonly the selected image (i.e., the primary selection image) in the imagedisplay area, but maintain secondary selection of the other images. Toindicate these selections, the application highlights the thumbnails ofthe secondary image selections with a first selection indicator, whilehighlighting the thumbnail of the primary selection image (the displayedimage) with a second selection indicator (e.g., using thick and thinhighlighted boundaries).

When in this viewing mode for multiple images, some embodiments allowthe user to cycle through the different selected images with horizontalswipe gestures. In addition, the user can remove an image from the setof selected images with a vertical swipe gesture. When an image isremoved from the set, the application removes the selection indicatorfrom the corresponding thumbnail. When multiple images are displayed inthe image display area, the user can apply a tag (e.g., a favorites tag)to all of the images, or select one of the images for primary displayand then apply a tag to only the primary image selection.

While viewing images, the application of some embodiments allows theuser to interact bidirectionally with image hosting and social mediawebsites. For instance, the user can add a caption to an image, which isattached to the image both within the image-viewing application as wellas when the image is exported to an external application or website.Furthermore, when a user of an external website comments on the hostedimage, some embodiments automatically retrieve this information anddisplay the external comments within the image-viewing application.

In addition to the above-described features, the application of someembodiments provides a context-sensitive help feature. Specifically,when a help tool is invoked, the application displays help indicatorsthat are tailored to the items with which a user is currently working.When a user changes the active set of tools in use, the applicationdisplays help indicators for the active set of tools. For moveable tools(e.g., sliders), some embodiments move the help indicators along withthe tools as the tools are moved.

The preceding Summary is intended to serve as a brief introduction tosome embodiments of the invention. It is not meant to be an introductionor overview of all inventive subject matter disclosed in this document.The Detailed Description that follows and the Drawings that are referredto in the Detailed Description will further describe the embodimentsdescribed in the Summary as well as other embodiments. Accordingly, tounderstand all the embodiments described by this document, a full reviewof the Summary, Detailed Description and the Drawings is needed.Moreover, the claimed subject matters are not to be limited by theillustrative details in the Summary, Detailed Description and theDrawings, but rather are to be defined by the appended claims, becausethe claimed subject matters can be embodied in other specific formswithout departing from the spirit of the subject matters.

BRIEF DESCRIPTION OF THE DRAWINGS

The novel features of the invention are set forth in the appendedclaims. However, for purpose of explanation, several embodiments of theinvention are set forth in the following figures.

FIG. 1 illustrates two different modes of a GUI for an image-viewingapplication of some embodiments.

FIG. 2 illustrates the selection of multiple images to simultaneouslydisplay within the image display area of a GUI.

FIG. 3 illustrates a process for displaying all images that are similarto a selected image according to a particular set of criteria.

FIG. 4 illustrates the application of a tag images in a GUI.

FIG. 5 illustrates the use of a context-sensitive help feature in a GUI.

FIG. 6 illustrates the creation of a new collection of images accordingto some embodiments.

FIG. 7 conceptually illustrates a process of some embodiments forcreating a new collection of images (e.g., an album).

FIG. 8 conceptually illustrates a collection data structure 800 of someembodiments.

FIG. 9 illustrates navigation between the image organization, viewing,and editing GUI and the collection organization GUI.

FIG. 10 illustrates a user navigating within the collection organizationGUI to view a newly created album.

FIG. 11 illustrates a user navigating through the collectionorganization GUI over according to some embodiments.

FIG. 12 illustrates a vertical scrolling technique according to someembodiments.

FIG. 13 illustrates navigation between the image viewing and editing GUIand the collection organization GUI over four stages for the mobilephone and media player implementation of some embodiments while inportrait mode.

FIG. 14 illustrates a detailed view of a GUI of some embodiments forviewing, editing, and organizing images.

FIG. 15 conceptually illustrates a data structure for an image as storedby the application of some embodiments.

FIG. 16 illustrates a GUI over four stages in which the user moves athumbnail display area from the left side to the right side of the GUIin order to switch from right-handed mode to left-handed mode.

FIGS. 17-19 illustrate left-handed and right-handed GUI modes of someembodiments, in both portrait and landscape mode.

FIG. 20 conceptually illustrates a state diagram showing states andchanges in the state for the thumbnail display area in the image viewingGUI of some embodiments.

FIG. 21 illustrates a user increasing the size of the thumbnail displayarea.

FIG. 22 illustrates a user decreasing the size of the thumbnail displayarea.

FIG. 23 illustrates a swipe gesture to remove the thumbnail display areafrom the GUI while in the right-handed GUI mode.

FIG. 24 illustrates a similar swipe gesture to remove the thumbnaildisplay area from the GUI while in the left-handed mode.

FIG. 25 illustrates the selection of a GUI item that causes thethumbnail display area to slide off of the GUI.

FIG. 26 illustrates a swipe gesture to return the thumbnail display areato the GUI while in the right-handed GUI mode.

FIG. 27 illustrates a similar swipe gesture to return the thumbnaildisplay area to the GUI while in the left-handed GUI mode.

FIG. 28 illustrates the selection of a GUI item that causes thethumbnail display area to slide onto the GUI.

FIG. 29 illustrates a user scrolling through the thumbnail display area.

FIG. 30 illustrates a portrait mode GUI as a user scrolls through thethumbnails of a collection in the thumbnail display area.

FIG. 31 illustrates the modification of the size of the thumbnaildisplay area in the portrait GUI.

FIG. 32 illustrates the horizontal scrolling of the thumbnail displayarea when sized down to one row.

FIG. 33 illustrates a user scrolling through images in the thumbnaildisplay area of the mobile phone and media player GUI of someembodiments.

FIG. 34 conceptually illustrates a process of some embodiments forinvoking a zoom tool.

FIG. 35 illustrates an example of invoking and deselecting a zoom toolthrough the right-handed GUI of some embodiments.

FIG. 36 illustrates an example of invoking a zoom tool through the GUIwhen the GUI is in a left-handed mode.

FIG. 37 conceptually illustrates state diagram that presents variousoperations of a zoom tool in some embodiments.

FIG. 38 illustrates the magnification operation of the zoom tool in aright-handed GUI.

FIG. 39 illustrates the de-magnification operation of the zoom tool in aright-handed GUI.

FIG. 40 illustrates the move operation of the zoom tool.

FIG. 41 illustrates the magnification operation of the zoom tool in aleft-handed GUI.

FIG. 42 illustrates the de-magnification operation of the zoom tool in aleft-handed GUI.

FIG. 43 conceptually illustrates a process of some embodiments foridentifying and displaying similar images within a collection.

FIG. 44 illustrates a GUI for an image viewing application in which auser selects a particular image and the application identifies the setof images within a collection that are similar to the selected image.

FIG. 45 conceptually illustrates a division of an image into ninedifferent tiles, each of which is one-fourth the size of the image.

FIG. 46 indicates the sixteen quadrants of pixels that result from thisparticular division of the image, and which of the tiles include pixelsfrom each quadrant.

FIG. 47 conceptually illustrates a process 4700 for generating a set ofhistograms according to some embodiments of the invention.

FIG. 48 conceptually illustrates the HSV color space 4800.

FIG. 49 illustrates a circular cross section of the HSV color space(i.e., at a constant value), with two regions defined.

FIG. 50 illustrates a three-dimensional portion of the HSV color spacedivided into two regions.

FIG. 51 illustrates nine pixels used by some embodiments to calculatethe texture for the center pixel.

FIG. 52 conceptually illustrates the software architecture of portionsof the image viewing, editing, and organization application of someembodiments that generate histograms and compare images for similarity.

FIG. 53 conceptually illustrates a process of some embodiments forselecting a block of thumbnails within the image display area.

FIGS. 54 and 55 illustrate examples of the selection of blocks ofthumbnails.

FIG. 56 conceptually illustrates a process of some embodiments fortranslating user input over an unselected thumbnail into a selection ofthe thumbnail.

FIG. 57 illustrates various selection inputs in the GUI of someembodiments.

FIG. 58 illustrates a similar set of selection operations in the mobilephone and media player GUI of some embodiments.

FIG. 59 conceptually illustrates a process of some embodiments fordisplaying multiple images simultaneously within an image display area.

FIG. 60 illustrates a GUI in which the user makes a block selection offour thumbnails.

FIG. 61 illustrates the average aspect ratio region of the four selectedimages.

FIG. 62 illustrates that the ideal number of columns for a 187:144aspect ratio region within the 4:3 image display area 6005 is two, withtwo rows.

FIG. 63 illustrates the different aspect ratio images fit within thegrid region.

FIG. 64 illustrates the sizes of the images when fit to occupy the samearea in the image display area as a particular one of the other images.

FIG. 65 illustrates the four images displayed within the image displayarea.

FIG. 66 conceptually illustrates a state diagram that describesdifferent states and transitions between these states of the GUI of someembodiments relating to the selection/deselection of images and viewingof selected images.

FIG. 67 illustrates a transition from displaying multiple selectedimages in the GUI to displaying one of the selected images as the activeimage.

FIG. 68 illustrates a series of rightward swipe gestures in the GUI inorder to cycle between selected images.

FIG. 69 illustrates a leftward swipe gesture in the GUI in order tocycle between selected images.

FIG. 70 illustrates a downward swipe gesture in the GUI of someembodiments.

FIG. 71 illustrates examples of a user tapping on the selectedthumbnails in the GUI.

FIG. 72 conceptually illustrates a state diagram for the GUI of someembodiments relating to the application of a tag in three differentstates.

FIG. 73 illustrates the application of the hide image tag to an image.

FIG. 74 illustrates the application of a flag image tag to an image.

FIG. 75 illustrates the application of the flag image tag to multipleimages.

FIG. 76 illustrates the use of the tag filtering button.

FIG. 77 illustrates the application of the favorites tag to an image.

FIG. 78 illustrates the application of the favorites tag to multipleimages.

FIG. 79 conceptually illustrates a process performed by the applicationof some embodiments upon receipt of a tag to apply to an image.

FIG. 80 illustrates a user navigating from an album to a collection offavorite images.

FIGS. 81-83 illustrate the access of image information for one or moreimages in the GUI.

FIG. 84 illustrates a user adding a caption to an image.

FIG. 85 illustrates user interaction with a GUI in order to share animage via a social media site according to some embodiments.

FIG. 86 conceptually illustrates a process of some embodiments forsharing an image via a social media or photo sharing website.

FIGS. 87A-87C illustrate a user uploading an image to Facebook®.

FIG. 88 illustrates a user selecting two images for upload to Facebook®,including an edited version of the image uploaded in FIGS. 87A-87C.

FIG. 89 conceptually illustrates a process of some embodiments forretrieving comments posted to an image on a photo sharing or socialmedia website.

FIG. 90 illustrates a user posting a comment to a shared image throughthe information window in the GUI of some embodiments.

FIG. 91 conceptually illustrates a state diagram that presents variousoperations of the help feature in some embodiments.

FIG. 92 illustrates an example of displaying the help icon in aconspicuous manner according to some embodiments.

FIG. 93 illustrates an example of invoking the help tool.

FIG. 94 illustrates an example of modifying the help tool level when theuser selects a new set of tools within the GUI.

FIG. 95 illustrates an example of the application automatically moving ahelp indicator along with a corresponding tool.

FIG. 96 illustrates an example of displaying a detailed help articlerelated to one of the GUI items.

FIG. 97 illustrates another example of the display of help indicatorsfor different GUI items in some embodiments.

FIG. 98 conceptually illustrates the software architecture of an imageviewing, editing, and organization application of some embodiments.

FIG. 99 is an example of an architecture of a mobile computing device onwhich some embodiments are implemented.

FIG. 100 conceptually illustrates an electronic system with which someembodiments are implemented.

DETAILED DESCRIPTION

In the following description, numerous details, examples and embodimentsare set forth for purpose of explanation. However, one of ordinary skillin the art will realize that the invention is not limited to theembodiments set forth and that the invention may be practiced withoutsome of the specific details and examples discussed. In other instances,well-known structures and devices are shown in block diagram form inorder not to obscure the description of the invention with unnecessarydetail.

Some embodiments of the invention provide a novel application forviewing and working with images. In some embodiments, the applicationoperates in multiple different modes, with different graphical userinterfaces (GUIs) for the different modes. For instance, in someembodiments, the application operates on a touchscreen device in bothleft-handed and right-handed modes. In addition to the different GUIsfor the different modes, some embodiments present specific userinterface tools in different manners (e.g., different orientations) inthe different modes. The application provides various features forworking with one or multiple images. For instance, some embodimentsenable various methods for viewing multiple different images, including(i) novel touch interactions to select multiple items and (ii) novelmethods for identifying similar images from a group of images. Inaddition, the application provides various novel interactions forworking with multiple selected images, such as interactions for cyclingthrough images and tagging images.

As mentioned, the image editing, viewing, and organization application(referred to below as an image-viewing application, an image-editingapplication, etc.) of some embodiments provides multiple different modes(e.g., left-handed and right-handed modes). Some embodiments switchbetween modes according to the location in the GUI of a particular GUIitem. When switching between modes, some embodiments preserve arelationship in the GUI (e.g., an order) of a first set of GUI itemswhile modifying a relationship of a second set of GUI items. Inaddition, the application of some embodiments presents certain tools indifferent manners (e.g., orientations) when the tools are activated inthe different modes.

FIG. 1 illustrates two different modes of such a GUI 100 for animage-viewing application of some embodiments. Specifically, this figureillustrates the GUI 100 in a right-handed mode in two stages 110 and120, while illustrating the GUI 100 in a left-handed mode in two stages130 and 140.

The GUI 100 includes a thumbnail display area 105, an image display area115, a first set of GUI items 125, and a second set of GUI items 135.The thumbnail display area 105 displays thumbnails of a set of images(e.g., a user-created album or other collection of associated images).The thumbnails are scaled down versions of the images in the collection.In some embodiments, the thumbnails do not necessarily display entireimages, but instead display only a portion of each image so that eachthumbnail has the same aspect ratio (e.g., a square). Users can selectthumbnails (e.g., via a touch interaction, a mouse click, etc.) in orderto cause the corresponding image to appear in the image display area115.

The image display area 115 displays larger versions of one or moreselected images. In this case, the thumbnail 107 is selected in thethumbnail display area 105, and thus the corresponding image isdisplayed in the image display area 115. As shown, some embodimentsdisplay an indication for each of any selected thumbnails in thethumbnail display area. In this case, the thumbnail 107 is shown with athick dashed border; however, one of ordinary skill in the art willrecognize that many different selection indications are possible.

In addition to providing viewing functionality in the image displayarea, some embodiments provide the user with various editing, tagging,and other operations to apply to the displayed images. The first set ofGUI items 125 includes three items 126-128 that activate different setsof editing tools for editing images. The items 126-128 are arranged in aparticular left to right order that follows the order in which a userwill often want to make edits to the image. The second set of GUI items135 includes three items 136-138 that are arranged in an order designedto provide functionality based on relative location to the other itemsin the GUI (e.g., the thumbnail display area 105 and image display area115).

As stated, stage 110 illustrates the GUI 100 in the right-handed mode.In this mode, the thumbnail display area 105 is on the left side of theGUI. In addition, the GUI items 126-128 are arranged on the left side ofthe GUI, with item 126 on the left, item 127 in the center, and item 128on the right. The GUI items 136-138 are arranged on the right side ofthe GUI, with item 136 on the left, item 137 in the center, and item 138on the right.

The stage 130 illustrates the GUI in the left-handed mode. In this case,the thumbnail display area 105 is located on the right side of the GUI.This ensures that when a user moves her left hand over the GUI, her armwill not block the view of the thumbnail display area. Similarly, withthe thumbnail display area 105 located on the left side of the GUI inright-handed mode, the user's right arm will not block their view of thethumbnail display area 105.

In the stage 130, the first set of GUI items 125 are located on theright side of the GUI 100 underneath the thumbnail display area 105,while the second set of GUI items 125 are located on the left side ofthe GUI 100. However, the first set of items 125 maintains the sameleft-to-right order that matches the order in which a user typicallywill use the associated editing tools, while the order is reversed forthe second set of items 135 as compared to these items in right-handedmode.

In some embodiments, the application provides a user-interface mechanismfor switching between these two modes. For example, in some embodimentsthe thumbnail display area is moveable, and the application switchesbetween the left- and right-handed modes based on the location in theGUI to which the thumbnail display area is moved. In order to get fromthe stage 110 to the stage 130, the user could pick up and drag thethumbnail display area 105 from the left side of the touchscreen displayto the right side of the touchscreen display. Upon doing so, theapplication automatically moves the first and second sets of tools 125and 135, and reverses the order of the second set of tools 135.

In addition, the image-viewing application provides certain GUI tools indifferent manners in the different modes. For instance, some embodimentsdisplay specific tools in different orientations depending on whetherthe application is in left- or right-handed mode. FIG. 1 illustrates anexample of such a GUI tool 145 that is activated in differentorientations in the two different modes. In this case, the GUI tool 145is a zoom tool that magnifies a particular area of the image displayarea.

As shown, in the stage 110, a user interacts with the image display areawith their right hand in order to activate the zoom tool 145. While thisfigure shows a one-finger interaction, different embodiments respond todifferent types of inputs in order to activate such a tool. For example,some embodiments require two separate touch interactions that coincideat least partially in time in order to activate a zoom tool.

Stage 120 illustrates the result of this interaction while in theright-handed display mode. The application displays the zoom tool 145over the location of the user's touch interaction. As shown, theapplication displays the tool 145 in a first orientation, with the +sign (indicating greater magnification) on the right and the—sign(indicating less magnification) on the left.

Correspondingly, in the stage 130, the user interacts with the imagedisplay area with their left hand in order to activate the zoom tool145. The stage 140 illustrates the result of this interaction while inthe left-handed display mode. As in stage 120, the application displaysthe zoom tool 145 over the location of the user's touch interaction. Inthis case, however, the application displays the zoom tool 145 in asecond orientation, with the + sign on the left and the − sign on theright.

In some embodiments, the zoom tool is capable of varying degrees ofmagnification. To modify the magnification, the user performs a rotationgesture of two separate touch inputs (e.g., with the thumb and indexfinger). In some embodiments, when the application is operating inright-handed mode, clockwise rotation increases the magnification whilecounter-clockwise rotation decreases the magnification. When inleft-handed mode, the opposite is true, with counter-clockwise rotationincreasing the magnification and clockwise rotation decreasing themagnification.

Furthermore, some embodiments display magnification information (e.g.,the level of magnification inside the active tool) as part of the tool.When in right-handed mode, this magnification information is displayedon the left side of the magnifier, while in left-handed mode theinformation is displayed on the right side of the magnifier. Thisprevents the user's hand from blocking the view of the magnificationinformation on the zoom tool while zooming in or out.

As mentioned, in some embodiments, the thumbnail display area ismoveable between two different sides of the application GUI. Inaddition, the image-editing application enables the user to move thethumbnail display area on and off the application GUI via swipe gestures(e.g., right and left swipe gestures on a touchscreen). Furthermore,users can modify the size (and number of columns of thumbnails) of thethumbnail display area by moving the boundary between the thumbnaildisplay area and the image display area with a drag gesture on thetouchscreen.

In addition to operating in different modes, the image-viewingapplication provides a variety of novel operations and interactions forviewing and working with images. For instance, some embodiments enableseveral different operations for selecting multiple images to display inthe image display area. FIG. 2 illustrates the selection of multipleimages to simultaneously display within the image display area of a GUI200 over four stages 210-240.

The GUI 200 includes a thumbnail display area 205 and an image displayarea 215, which are similar to the corresponding display areas describedabove for the GUI 100. In this figure (and many other figures in thisapplication) the GUI is shown in right-handed mode, with the thumbnaildisplay area to the left. One of ordinary skill will recognize that manyof the interactions shown are equally applicable to the left-handed GUImode.

The first stage 210 illustrates that a thumbnail 225 has been selected,and the corresponding selected image 227 is displayed at the largestpossible size in the image display area (while maintaining the aspectratio of the image). In the second stage 220, the user selects a secondthumbnail 235 corresponding to a second image 237 via a touchinteraction. One of ordinary skill in the art will recognize thattouchscreen devices provide the ability to differentiate between varioustypes of interactions (e.g., taps, double taps, press and hold, separatesimultaneous interactions, multi-finger interactions, etc.).

The third stage 230 illustrates that the image display area 215 nowdisplays both of the selected images 227 and 237. Furthermore, theapplication displays the thumbnails 225 and 235 with a lighter dashedboundary than in the previous stage. Some embodiments use differentselection indications in the thumbnail display area (e.g., thick andthin borders or highlights, different colors, etc.) to differentiatebetween a single selected image and multiple selected images.

The two images 227 and 237 shown in the image display area 215 do nothave the same aspect ratio, but are displayed as approximately the samesize. When displaying multiple images in the image display area, someembodiments maintain a constant visual weight between the differentimages. That is, rather than trying to fill all of the space in theimage display area by displaying the images as different sizes, theapplication displays each image as the same size irrespective of thedimensions of the image. In order to keep the visual weighting constantbetween different images, some embodiments calculate the average aspectratio of all of the images to display in the image display area, thenidentifies an optimal division of the image display area into thecorrect number of regions having the average aspect ratio. Within theseregions, the application then displays the images such that each imageis displayed using the same number of pixels.

The third stage 230 also illustrates the user selecting a thirdthumbnail 245 corresponding to an image 247 via another touchinteraction. As a result, in the fourth stage 240, the image displayarea 215 displays the three selected images 227, 237, and 247. In orderto display the third image, the application has not had to reduce thesize of the other two images, as the same visual weighting for the threeimages could be maintained without a size reduction.

As mentioned, some embodiments respond to various different touchinteractions in order to display multiple images in the image displayarea. One such touch operation involves simultaneous selection (e.g.,via two different touch inputs) of first and second thumbnails in thethumbnail display area in order to select the first and secondthumbnails and all thumbnails in between. In response to such a blockselection, the application displays all of the images corresponding tothe selected thumbnails in the image display area.

Some embodiments additionally differentiate between different types ofthumbnail selection input. For example, when a user selects a particularthumbnail in a first manner (e.g., a tap on a touchscreen or a singleclick), the application selects only the particular thumbnail anddisplays only its corresponding image in the display area. However, whena first thumbnail is already selected and a user selects a secondthumbnail in a second manner (e.g., with a press and hold on atouchscreen or a click and hold), the application maintains theselection of the first thumbnail while selecting the second thumbnail.The application displays both the first and second images (and any otherselected images) in the image display area. In this manner, someembodiments allow the user to add any number of images to the imagedisplay area.

Furthermore, the image-viewing application of some embodiments candisplay all images that are similar to a selected image according to aparticular set of criteria. FIG. 3 illustrates such a process over threestages 310-330 of a GUI 300. The GUI 300 includes a thumbnail displayarea 305 and an image display area 315, similar to the correspondingareas of the previous figures.

The first stage 310 of FIG. 3 illustrates that a thumbnail 335 isselected and its corresponding image 340 is displayed in the imagedisplay area 315. In the second stage 320, the user has performed atouch operation on the selected thumbnail 335. One of ordinary skill inthe art will recognize that this is a generic user input, and that otherembodiments might provide for the activation of the similar imagesfeature differently (e.g., a double tap or double click of a thumbnail(whether or not already selected), a hotkey or sequence of hotkeys, atouch gesture or sequence of gestures, a menu item or UI button, etc.).The third stage 330 illustrates that the application has identifiedimages similar to the selected image 340 and displayed the identifiedimages 345 and 350 in the image display area 315. Furthermore, thecorresponding thumbnails 335, 355, and 360 are all selected in thethumbnail display area 305, as shown by the dashed lines.

To identify these similar images, some embodiments compare all images ina collection of associated images (e.g., the images whose thumbnails areeligible for display in the thumbnail display area) to the selectedimage, and identify which of the images are within a thresholdsimilarity of the selected image according to the particular set ofcriteria. Some embodiments generate histograms of the pixels of an image(e.g., based on color, texture, and gradient values for the pixels) andcompare the histograms to identify similar images. In some embodiments,the application generates different histograms for different regions ofthe images and compares the histograms of corresponding regions betweenimages. The images are divided into the regions in such a way that somepixels are part of multiple regions while other pixels are part of onlyone region. This enables the application to give greater considerationto the pixels that are more indicative of the content of the image(e.g., those in the center of the image) in making the comparisonbetween two images.

Once multiple thumbnails are selected and multiple images displayed inthe image display area, some embodiments provide various novelinteractions for viewing and interacting with the images. For instance,a user can perform a selection operation (e.g., a tap on a touchscreen,a mouse click) on one of the displayed images (rather than itscorresponding thumbnail). Some embodiments display only the selectedimage (i.e., the primary selection image) in the image display area, butmaintain secondary selection of the other images. To indicate theseselections, the application highlights the thumbnails of the secondaryimage selections with a first selection indicator, while highlightingthe thumbnail of the primary selection image (the displayed image) witha second selection indicator (e.g., using thick and thin highlightedboundaries).

When in this viewing mode for multiple images, some embodiments allowthe user to cycle through the different selected images with horizontalswipe gestures. In addition, the user can remove an image from the setof selected images with a vertical swipe gesture. When an image isremoved from the set, the application removes the selection indicatorfrom the corresponding thumbnail. When multiple images are displayed inthe image display area, the user can apply a tag (e.g., a favorites tag)to all of the images, or select one of the images for primary displayand then apply a tag to only the primary image selection.

FIG. 4 illustrates the application of such a tag to the images 340-350in the GUI 300 over three stages 410-430. The first stage 410illustrates the GUI 300 in the same state as the third stage 330 of FIG.3, with the images 340-350 displayed in the image display area 315. Atthe second stage 420, the user selects a GUI item 405 for applying a tagto the selected images. The GUI item 405 is a conceptual item, and someembodiments of the image-editing application might implement such afunctionality through a different UI item, a particular type ofselection gesture, hotkeys, etc. Furthermore, the item 405 represents ageneric tag, while some embodiments might include various differenttags, such as a favorites tag, a flag, custom information tags, etc.

The third stage illustrates the result of the selection of the GUI item405. The three thumbnails 335, 355, and 360 now display a markerindicating that they have been tagged. In some embodiments, theapplication displays icons for some tags within the thumbnails, whilesimply storing other tags as properties of the tagged images. Inaddition, the GUI item 405 is now highlighted, indicating that all ofthe selected images have been tagged. Some embodiments indicate that allof the images displayed in the display area are tagged with a particulartag by highlighting the tag button in the GUI. A subsequent selection ofthe tag button removes the tag from the selected images.

While viewing images, the application of some embodiments also allowsusers to interact bidirectionally with image hosting and social mediawebsites. For instance, users can add a caption to an image, which isattached to the image both within the image-viewing application as wellas when the image is exported to an external application or website.Furthermore, when a user of an external website comments on the hostedimage, some embodiments automatically retrieve this information anddisplay the external comments within the image-viewing application.

In addition to the above-described features, the application of someembodiments provides a context-sensitive help feature. Specifically,when a user invokes a help tool, the application displays helpindicators that are tailored to the items with which a user is currentlyworking. FIG. 5 illustrates the use of such a context-sensitive helpfeature in the GUI 100 over four stages 510-540. The GUI includes a helpactivation item 137 for invoking the context-sensitive help feature. Thefirst stage shows the GUI 100 with one selected image displayed in theimage display area 115.

In the second stage 520, the user selects the help activation item 137via a touch interaction. As with the other GUI items described above,the help activation item 137 is a conceptual item that could actually beinvoked in a variety of different manners, including various touchinteractions, cursor interactions, etc.

The third stage 530 illustrates that the help activation item 137 is nowactive, and help indicators 505 have appeared for the GUI items 126-128.These help indicators 505 display the purpose of the different GUIitems, and in some embodiments are selectable in order to access a helpmanual with additional information about the selected item. The thirdstage also illustrates the user selecting the exposure item 127.

When a user changes the active set of tools in use, the applicationdisplays help indicators for the active set of tools. As a result, thefourth stage 540 shows a different set of help indicators 515. Thesehelp indicators 515 display the purpose of the different exposureadjustment items that have appeared in the GUI 100. The help indicators505 for the crop, exposure, and color items are no longer displayed,because the user has navigated into a specific one of these sets ofediting tools. In addition, for moveable tools (e.g., the exposureadjustment sliders), some embodiments move the help indicators alongwith the tools as the user moves the tools.

FIGS. 1-5 illustrate various examples of the novel features provided bysome embodiments for viewing and working with images. Several moredetailed embodiments are described below. Section I describes imagecollections and navigating between different groups of collectionswithin the application. Before describing different GUI modes andvarious interactions with the GUI in the different modes in Section III,Section II describes the GUI and image data structure of someembodiments. Section IV then describes different techniques forselecting multiple images and how the application of some embodimentsdisplays multiple images at once. Section V describes various operationsthat may be applied to one or more operations in some embodiments,including selection and deselection operations and tagging operations.Next, Section VI describes an image sharing feature and Section VIIdescribes a context-sensitive help feature of some embodiments. SectionVIII then describes the software architecture of the media-editingapplication of some embodiments. Finally, Section IX describes anelectronic system with which some embodiments of the invention areimplemented.

I. Image Collections

Before describing the various features involved in working withcollections of images, this application will describe the creation andorganization of such collections according to some embodiments of theinvention. The image editing, viewing, and organization application ofsome embodiments enables users to import images (e.g., photographs),associate the images into collections (e.g., albums, etc.), createshareable media (e.g., journals) from the images, edit the images, etc.Some embodiments automatically associate images imported together from aseparate device (i.e., a device other than the device on which theapplication runs) as an event. Albums, on the other hand, areuser-created collections of images. While the media organized by theapplication is described predominantly herein as images, someembodiments of the invention also organize, view, and edit other typesof media, such as videos.

FIG. 6 illustrates the creation of a new collection of images over fourstages 610-640 according to some embodiments. Specifically, the stagesillustrate a user selecting a particular event collection, selectingseveral images within the event, and then forming an album from theselected images. In this figure, as well as many others within thisdocument, user interactions are shown in a first stage and the resultingchange in the GUI shown in the subsequent stage, for explanatorypurposes. However, one of ordinary skill in the art will recognize thatin most cases, the delay between receiving a user interaction and thechange in the display will be nearly instantaneous.

The first stage 610 illustrates a collection organization GUI 600 fordisplaying the collections of images available on the device. The GUI600 includes a set of tabs 605 that allow a user to switch betweendifferent types of collections. The tabs 605 allow a user to choosealbums (user-created collections of images), photos (one collection thatamalgamates all of the images from the various other collections),events (collections of images that were imported together to the deviceon which the image-viewing application operates), and journals (aspecific way of presenting and sharing collections of images). In someembodiments, the user can select the different tabs 605 to switchbetween the different types of collections. One of ordinary skill in theart will recognize that some embodiments include different tabs (e.g., aspecific videos tab, tabs for other types of shareable collections,etc.).

The GUI 600 also includes shelves 615 that display icons representingthe various collections available to a user. In some embodiments, theshelves 615 are displayed to give a three-dimensional appearance ofglass shelves, with reflections and shadows. The icons representingalbums, photos, events, and journals have the appearance of resting onthe glass shelves and casting shadows that are seen in the GUI. At stage610, the GUI includes an icon 625 representing a collection of imagescalled “Event 2” that the user selects (in this case, through a touchoperation).

The second stage 620 illustrates a GUI 650 that results from the userselecting the icon 625, as well as the results of additional selectionswithin the resultant GUI 650. When a particular collection is selected,the application displays a GUI for the particular collection. The GUI650 includes a thumbnail display area 655, an image display area 660, aswell as various other GUI items that will be described in further detailbelow by reference to FIG. 14. The GUI 650 also displays, at its top,the name of the collection that it is displaying (in this case, “Event2”).

In this stage, the user has selected three thumbnails in the thumbnaildisplay area 655, and the application displays the three correspondingimages in the image display area 660. Details regarding differentmanners of selecting multiple images will be described in detail belowin Section IV.

In the third stage 630, the user selects a settings GUI item 665 (e.g.,via a touch interaction, a cursor controller, etc.). The settings item,in some embodiments, activates a menu that is based on the context ofthe user's previous actions within the application. For instance, whenthe user has activated a particular set of editing tools, the settingsmenu may include options related to the activated editing tools.

In this case, however, the user is in a viewing mode, and the settingsmenu includes an option of “Create new album”. The fourth stage 640illustrates the user selecting this menu option to create a new album.In some embodiments, selecting this option causes the application tocreate a new album from the selected images. Some embodiments includeother options related to albums in the settings menu, such as addingselected images to a previously-created album. In addition, someembodiments provide different mechanisms for creating a new album. Forinstance, in some embodiments, a user can create a new album through thecollections organization GUI 600, then add new images to the album byaccessing a different collection.

Furthermore, upon creating a new album, some embodiments display a newwindow or dialog box through which the user can set the parameters ofthe new album. For instance, users can enter an album name and, in somecases, determine whether to include all selected images, all images inthe present collection, or choose images from another collection, aswell as other options.

Some embodiments, however, do not provide the option to create newalbums. Albums can be imported into the image-viewing application fromadditional applications running on the same device (e.g., a separateimage organization application). Instead, the only form of collectionthat the user may create from a selection of several images is ajournal. In addition, by flagging an image or setting an image as afavorite, the user causes the image to be added to an album specific tothose tags.

FIG. 7 conceptually illustrates a process 700 of some embodiments forcreating a new collection of images (e.g., an album). As shown, theprocess 700 begins by receiving (at 705) a command to create a newcollection of images. In some embodiments, this command is a usercommand such as the “Create new album” menu option shown in FIG. 6,though one of ordinary skill will recognize that the command could bereceived through various different user input devices as well as throughvarious different GUI constructs. Furthermore, as stated above, in someembodiments the only type of collection that a user could create byrequest is a journal.

The process 700 next identifies (at 710) the presently selected images.In some embodiments, a users can select a subset of the images in aparticular collection, and then instruct the application to create a newcollection from the selected images.

The process then associates (at 715) the identified images as a newcollection. In FIG. 6, three images are shown as presently selected, andthus these three images will be associated as a new collection. In someembodiments, the application creates a new collection data structure forthe newly generated collection, and stores references (e.g., pointers,database reference IDs, etc.) to each of the images in the collection.

FIG. 8 conceptually illustrates a collection data structure 800 of someembodiments. When a user generates a new album or imports new images fora new event, the application automatically creates a new collection datastructure for the album or event. The collection data structure 800includes a collection ID, a collection type, a collection name, a keyimage, and references to a set of images. The collection ID is a uniqueidentifier for the collection, that the application uses whenreferencing the collection. The collection type is the type ofcollection (e.g., album, event, journal, etc.). In some embodiments, theapplication includes the “photos” collection, which references eachimage imported into the application irrespective of which othercollections also include the image. The collection name is theuser-assigned name for the collection, which is displayed at the top ofthe image viewing and editing GUI when the collection is selected aswell as the name used for the collection's icon in the collectionorganization GUI.

The key image is an image set by the user to represent the collection.In some embodiments, the application displays the key image as theselectable icon for the collection on the glass shelf in the collectionorganization GUI. In addition, the collection data structure 800includes an ordered series of references to each image in thecollection. The order of the images determines the order in which thethumbnails are displayed within the thumbnail display area in someembodiments. As will be described below, some embodiments store datastructures for each image imported into the application, and thecollections reference these data structures. These references may bepointers, references to database entries, etc.

FIG. 9 illustrates navigation between the image organization, viewing,and editing GUI 650 (referred to in some places below as an imageviewing GUI, image editing GUI, etc.) and the collection organizationGUI 600 over four stages 910-940. As shown, in the first stage 910, theuser selects a back button 905. In some embodiments, this button causesthe application to transition back to the collection organization GUI600. In some embodiments, the application animates this transition byminimizing the image viewing GUI 650 so that it shrinks into thecollection icon of the collection that had been displayed. Stages920-940 illustrate this animation.

In the second stage 920, the image viewing GUI 650 has begun to shrink,so that the edges of the collection organization GUI 600 are visible. Asshown, the application does not necessarily minimize the image viewingGUI 650 towards the center, but instead towards the location of the iconthat represents the collection displayed in the GUI. The third stage 930shows the application display at a point at which the image viewing GUIis barely larger than the collection icon 625. Finally, at the fourthstage 940, the image viewing GUI has fully minimized and only thecollection display area is shown. While this figure illustrates theentire GUI 650 (i.e., the thumbnail display area, toolbars, and imagedisplay area) minimizing, some embodiments remove the thumbnail displayarea and toolbars from the display as soon as the user hits the backbutton, so that only the image display area is shown being minimized.

FIG. 10 illustrates a user navigating within the collection organizationGUI 600 to view the newly created album, over four stages 1010-1040.Within the collection organization GUI 600, users can use the tabs 605to choose between the albums, photos, events, and journals. As describedbelow, users can also use swipe gestures to navigate between thedifferent tabs. The first stage 1010 illustrates a selection of thealbums tab 1005 while the events tab 1015 is active. As shown, someembodiments highlight the selected tab during the selection (e.g., whilea finger is pressing down over the tab, while a mouse button is helddown with a cursor over the tab, etc.).

The second stage 1020 illustrates that the albums tab 1005 is nowactive. In some embodiments, the application animates the transitionbetween the different tabs (i.e., shows the events sliding out of theGUI while new shelves with the albums slide into the display). Theshelves for the albums only include an icon 1025 that represents “Album1”. At this stage, the user selects the icon 1025 in order to accessthis album. In some embodiments, this causes a transition to the imageviewing GUI 650.

As shown in stage 1030, the application of some embodiments animatesthis transition as the opposite of the minimization animation shown inFIG. 9. Thus, at stage 1030, the image viewing GUI 650 has begun toexpand out of the selected icon 1025. The fourth stage 1040 illustratesthe result of this selection with the application displaying the imageviewing GUI 650.

The GUI indicates at the top that the currently active collection is“Album 1”. In the thumbnail display area, the only thumbnails are thosefor the three images that were shown as selected for “Album 1” in FIG.6. Some embodiments do not initially display any of the images in theimage display area, instead waiting for a user to select one or moreimages. Other embodiments, however, initially select the first image inthe ordered series for the collection or the key image for thecollection. Yet other embodiments store persistent data for eachcollection that indicates which image or images were selected the lasttime the collection was opened on the device, and use this persistentdata to display the collection upon its selection.

FIG. 11 illustrates a user navigating through the collectionorganization GUI 600 over four stages 1110-1140 according to someembodiments. As shown in the first stage 1110, the application storesinformation on at least nine albums, including a Favorites album, aCamera Roll album, a Flagged photos album, as well as other albums. Insome embodiments, users can tag an image as a favorite or flagged, whichautomatically places the image in the corresponding album. In addition,some embodiments automatically add to the Camera Roll album any imagecaptured with the device on which the application operates.

In some embodiments, a swipe gesture causes the application to navigatebetween the tabs. FIG. 11 illustrates such a gesture. As shown, in thefirst stage 1110 the user contacts the touchscreen with two fingers. Inthe next stage 1120, the user moves the two fingers leftwards whilemaintaining contact with the touchscreen. As shown, the shelves 1105begin moving to the left, as a second set of shelves 1115 approachesfrom the right side of the GUI. In the third stage 1130, the user hasreleased the point of contact with the touchscreen after sliding herfingers at least a threshold distance to qualify as a swipe gesture. Inaddition, the new set of shelves 1115 have continued moving to the left,replacing the shelves 1105, as shown by the arrows.

The fourth stage 1140 illustrates that the shelves 1115 have fully movedinto the GUI 600. Furthermore, the photos tab 1125 is now highlighted inthe display. Using these swipe gestures, the user can easily navigatebetween the different tabs without being required to specifically selectthe tab. When the user navigates to the photos tab, some embodimentsdisplay a similar set of shelves as for the other tabs, but displayindividual image thumbnails instead of collections. These shelvesinclude a thumbnail for each image imported into the image viewingapplication, which enable the user to navigate directly to a specificimage (e.g., to edit the image, share the image, etc.).

Although the shelves 1105 are entirely filled in the first stage 1110 ofFIG. 11, a particular instance of the application might store more thanthe maximum number of collections that can be shown on the device atonce. As such, the application of some embodiments enables users toscroll through the shelves vertically. FIG. 12 illustrates such ascrolling technique according to some embodiments over two stages 1210and 1220 of the GUI 600.

In stage 1210, the user contacts the touchscreen with two fingers. Inthe next stage 1220, the user moves the two fingers upwards whilemaintaining contact with the touchscreen. This causes the shelves toslide upwards through the GUI 600. As a result, an additional shelf hasappeared at the bottom of the GUI 600 and the top shelf has disappeared.As this is a smooth scrolling technique, in some embodiments the shelvesdo not move discretely, but instead may scroll partially on or off thetop and bottom of the display depending on the distance of the user'sswiping gesture.

The image-viewing application of some embodiments allows users to createan essentially unlimited number of albums, so long as the storagecapacity is available on the device. Similarly, users can have anunlimited number of events, photos, or journals. One of ordinary skillin the art will recognize that other gestures and inputs may be used tonavigate between sets of shelves. For example, some embodiments includean unlimited number of shelves stacked vertically, so that swipingupwards scrolls continuously through the shelves. In addition, someembodiments respond to tap or click inputs on the left and right sidesof the screen as an alternative to or in conjunction with the swipeinputs.

The image viewing, editing, and organization application of someembodiments operates on a mobile device. Some embodiments operate on atablet device (e.g., an iPad®), while other embodiments operate on amobile phone (e.g., an iPhone®) or a media player (e.g., an iPod®). TheGUI of the tablet implementation of some embodiments is different fromthe GUI of the mobile phone/media player implementation of someembodiments, though other embodiments of the tablet implementation mayuse the mobile phone/media player GUI, and vice versa.

FIG. 13 illustrates the navigation between the image viewing and editingGUI 1350 and the collection organization GUI 1300 over four stages1310-1340 for the mobile phone and media player implementation of someembodiments while in portrait mode. The first stage 1310 illustrates theimage viewing and editing GUI 1350, which includes many of the samefeatures as the image viewing and editing GUI 650. This GUI will bedescribed in greater detail below. In this stage, a user selects theback button 1305, in order to navigate back to the collectionorganization GUI.

The second stage 1320 illustrates the collection organization GUI 1300of some embodiments. Like the GUI 600, this GUI displays a set ofshelves (e.g., glass shelves) with icons that represent the differentcollections. However, whereas the GUI 600 included a set of tabs for thedifferent types of collections, the GUI 700 includes a set of selectableicons 1315 at the bottom of the display. These icons include selectionsfor albums (currently selected), photos, events, and journals. Inaddition, the display includes a settings menu.

At this stage 1320, the user selects the events icon 1325. The thirdstage 1325 illustrates that the events icon 1325 is now selected, andicons for different collections (two events) are shown on the shelves.The user selects one of these events, and the fourth stage 1340illustrates the image viewing GUI 1350 for the selected collection as aresult.

II. Image Viewing

The above-described figures illustrated various examples of the imageviewing GUI of some embodiments. FIG. 14 illustrates a detailed view ofa GUI 1400 of some embodiments for viewing, editing, and organizingimages. The GUI 1400 will be described in part by reference to FIG. 15,which conceptually illustrates a data structure 1500 for an image asstored by the application of some embodiments.

The data structure 1500 includes an image ID 1505, image data 1510, editinstructions 1515, Exchangeable image file format (Exif) data 1525, acaption 1530, shared image data 1535, cached versions 1540 of the image,any tags 1545 on the image, and any additional data 1550 for the image.The image ID 1505 is a unique identifier for the image, which in someembodiments is used by the collection data structures to refer to theimages stored in the collection.

The image data 1510 is the actual full-size pixel data for displayingthe image (e.g., a series of color-space channel values for each pixelin the image or an encoded version thereof). In some embodiments, thisdata may be stored in a database of the image viewing, editing, andorganization application, or may be stored with the data of anotherapplication on the same device. Thus, the data structure may store apointer to the local file associated with the application or an ID thatcan be used to query the database of another application. In someembodiments, once the application uses the image in a journal or makesan edit to the image, the application automatically makes a local copyof the image file that contains the image data.

The edit instructions 1515 include information regarding any edits theuser has applied to the image. In this manner, the application storesthe image in a non-destructive format, such that the application caneasily revert from an edited version of the image to the original at anytime. For instance, the user can apply a saturation effect to the image,leave the application, and then reopen the application and remove theeffect at another time. The edits stored in these instructions may becrops and rotations, full-image exposure and color adjustments,localized adjustments, and special effects, as well as other edits thataffect the pixels of the image. Some embodiments store these editinginstructions in a particular order, so that users can view differentversions of the image with only certain sets of edits applied.

The Exif data 1525 includes various information stored by the camerathat captured the image, when that information is available. While Exifis one particular file format that is commonly used by digital cameras,one of ordinary skill in the art will recognize that comparableinformation may be available in other formats as well, or may even bedirectly input by a user. The Exif data 1525 includes camera settingsdata, GPS data, and a timestamp. The camera settings data includesinformation about the camera settings for a image, if that informationis available from the camera that captured the image. This information,for example, might include the aperture, focal length, shutter speed,exposure compensation, and ISO. The GPS data 1525 indicates the locationat which an image was captured, while the timestamp indicates the time(according to the camera's clock) at which the image was captured.

The caption 1530 is a user-entered description of the image. In someembodiments, this information is displayed with the image in the imageviewing area, but may also be used to display over the image in acreated journal, and may be used if the image is posted to a socialmedia or photo-sharing website. When the user posts the image to such awebsite, the application generates shared image data 1535 for the image.This information stores the location (e.g., Facebook®, Flickr®, etc.),as well as an object ID for accessing the image in the website'sdatabase. The last access date is a date and time at which theapplication last used the object ID to access any user comments on theimage from the social media or photo sharing website.

The cached image versions 1540 store versions of the image that arecommonly accessed and displayed, so that the application does not needto repeatedly generate these images from the full-size image data 1510.For instance, the application will often store a thumbnail for the imageas well as a display resolution version (e.g., a version tailored forthe image display area). The application of some embodiments generates anew thumbnail for an image each time an edit is applied, replacing theprevious thumbnail. Some embodiments store multiple display resolutionversions including the original image and one or more edited versions ofthe image.

The tags 1545 are information that the application enables the user toassociate with an image. For instance, in some embodiments, users canmark the image as a favorite, flag the image (e.g., for further review),and hide the image so that the image will not be displayed within thestandard thumbnail grid for a collection and will not be displayed inthe image display area when the user cycles through a collection thatincludes the image. Other embodiments may include additional tags.Finally, the image data structure 1500 includes additional data 1550that the application might store with an image (e.g., locations andsizes of faces, etc.).

One of ordinary skill in the art will recognize that the image datastructure 1500 is only one possible data structure that the applicationmight use to store the required information for an image. For example,different embodiments might store additional or less information, storethe information in a different order, etc.

Returning to FIG. 14, the GUI 1400 includes a thumbnail display area1405, an image display area 1410, a first toolbar 1415, a second toolbar1420, and a third toolbar 1425. The thumbnail display area 1405 displaysthumbnails of the images in a selected collection. Thumbnails are smallrepresentations of a full-size image, and represent only a portion of animage in some embodiments. For example, the thumbnails in thumbnaildisplay area 1405 are all squares, irrespective of the aspect ratio ofthe full-size images. In order to determine the portion of a rectangularimage to use for a thumbnail, the application identifies the smallerdimension of the image and uses the center portion of the image in thelonger direction. For instance, with a 1600×1200 pixel image, theapplication would use a 1200×1200 square. To further refine the selectedportion for a thumbnail, some embodiments identify a center of all thefaces in the image (using a face detection algorithm), then use thislocation to center the thumbnail portion in the clipped direction. Thus,if the faces in the theoretical 1600×1200 image were all located on theleft side of the image, the application would use the leftmost 1200columns of pixels rather than cut off 200 columns on either side.

After determining the portion of the image to use for the thumbnail, theimage-viewing application generates a low resolution version (e.g.,using pixel blending and other techniques) of the image. The applicationof some embodiments stores the thumbnail for an image as a cachedversion 1540 of the image. Thus, when a user selects a collection, theapplication identifies all of the images in the collection (through thecollection data structure), and accesses the cached thumbnails in eachimage data structure for display in the thumbnail display area.

The user may select one or more images in the thumbnail display area(e.g., through various touch interactions described in Section IVbelow). The selected thumbnails are displayed with a highlight or otherindicator of selection. In thumbnail display area 1405, the thumbnail1430 is selected. In addition, as shown, the thumbnail display area 1405of some embodiments indicates a number of images in the collection thathave been flagged (i.e., that have a tag 1545 for the flag set to yes).In some embodiments, this text is selectable in order to display onlythe thumbnails of the flagged images.

The application displays selected images in the image display area 1410at a larger resolution than the corresponding thumbnails. The images arenot typically displayed at the full size of the image, as images oftenhave a higher resolution than the display device. As such, theapplication of some embodiments stores a cached version 1540 of theimage designed to fit into the image display area. Images in the imagedisplay area 1410 are displayed in the aspect ratio of the full-sizeimage. When one image is selected, the application displays the image aslarge as possible within the image display area without cutting off anypart of the image. When multiple images are selected, the applicationdisplays the images in such a way as to maintain their visual weightingby using approximately the same number of pixels for each image, evenwhen the images have different aspect ratios.

The first toolbar 1415 displays title information (e.g., the name of thecollection shown in the GUI, a caption that a user has added to thecurrently selected image, etc.). In addition, the toolbar 1415 includesa first set of GUI items 1435-1438 and a second set of GUI items1440-1443.

The first set of GUI items includes a back button 1435, a grid button1436, a help button 1437, and an undo button 1438. The back button 1435enables the user to navigate back to the collection organization GUI, asshown above in FIG. 9. Selection of the grid button 1436 causes theapplication to move the thumbnail display area on or off of the GUI(e.g., via a slide animation). In some embodiments, users can also slidethe thumbnail display area on or off of the GUI via a swipe gesture. Thehelp button 1437 activates a context-sensitive help feature thatidentifies a current set of tools active for the user and provides helpindicators for those tools that succinctly describe the tools to theuser. In some embodiments, the help indicators are selectable to accessadditional information about the tools. Selection of the undo button1438 causes the application to remove the most recent edit to the image,whether this edit is a crop, color adjustment, etc. In order to performthis undo, some embodiments remove the most recent instruction from theset of edit instructions 1515 stored with the image.

The second set of GUI items includes a sharing button 1440, aninformation button 1441, a show original button 1442, and an edit button1443. The sharing button 1440 enables a user to share an image in avariety of different ways. In some embodiments, the user can send aselected image to another compatible device on the same network (e.g.,Wi-Fi or Bluetooth network), upload an image to an image hosting orsocial media website, and create a journal (i.e., a presentation ofarranged images to which additional content can be added) from a set ofselected images, among others.

The information button 1441 activates a display area that displaysadditional information about one or more selected images. Theinformation displayed in the activated display area may include some orall of the Exif data 1525 stored for an image (e.g., camera settings,timestamp, etc.). When multiple images are selected, some embodimentsonly display Exif data that is common to all of the selected images.Some embodiments include additional tabs within the information displayarea for (i) displaying a map showing where the image or images werecaptured according to the GPS data, if this information is available and(ii) displaying comment streams for the image on any photo sharingwebsites. To download this information from the websites, theapplication uses the object ID stored for the image with the sharedimage data 1535 and sends this information to the website. The commentstream and, in some cases, additional information, are received from thewebsite and displayed to the user.

The show original button 1442 enables the user to toggle between theoriginal version of an image and the current edited version of theimage. When a user selects the button, the application displays theoriginal version of the image without any of the editing instructions1515 applied. In some embodiments, the appropriate size image is storedas one of the cached versions 1540 of the image, making it quicklyaccessible. When the user selects the button again 1442 again, theapplication displays the edited version of the image, with the editinginstructions 1515 applied.

The edit button 1443 allows the user to enter or exit edit mode. When auser has selected one of the sets of editing tools in the toolbar 1420,the edit button 1443 returns the user to the viewing and organizationmode, as shown in FIG. 14. When the user selects the edit button 1443while in the viewing mode, the application returns to the last used setof editing tools in the order shown in toolbar 1420. That is, the itemsin the toolbar 1420 are arranged in a particular order, and the editbutton 1443 activates the rightmost of those items for which edits havebeen made to the selected image.

The toolbar 1420, as mentioned, includes five items 1445-1449, arrangedin a particular order from left to right. The crop item 1445 activates acropping and rotation tool that allows the user to align crooked imagesand remove unwanted portions of an image. The exposure item 1446activates a set of exposure tools that allow the user to modify theblack point, shadows, contrast, brightness, highlights, and white pointof an image. In some embodiments, the set of exposure tools is a set ofsliders that work together in different combinations to modify the tonalattributes of an image. The color item 1447 activates a set of colortools that enable the user to modify the saturation and vibrancy, aswell as color-specific saturations (e.g., blue pixels or green pixels)and white balance. In some embodiments, some of these tools arepresented as a set of sliders. The brushes item 1448 activates a set ofenhancement tools that enable a user to localize modifications to theimage. With the brushes, the user can remove red-eye and blemishes, andapply or remove saturation and other features to localized portions ofan image by performing a rubbing action over the image. Finally, theeffects item 1449 activates a set of special effects that the user canapply to the image. These effects include gradients, tilt shifts,non-photorealistic desaturation effects, grayscale effects, variousfilters, etc. In some embodiments, the application presents theseeffects as a set of items that fan out from the toolbar 1425.

As stated, the UI items 1445-1449 are arranged in a particular order.This order follows the order in which users most commonly apply the fivedifferent types of edits. Accordingly, the editing instructions 1515 arestored in this same order, in some embodiments. When a user selects oneof the items 1445-1449, some embodiments apply only the edits from thetools to the left of the selected tool to the displayed image (thoughother edits remain stored within the instruction set 1515).

The toolbar 1425 includes a set of GUI items 1450-1454 as well as asettings item 1455. The auto-enhance item 1450 automatically performsenhancement edits to an image (e.g., removing apparent red-eye,balancing color, etc.). The rotation button 1451 rotates any selectedimages. In some embodiments, each time the rotation button is pressed,the image rotates 90 degrees in a particular direction. Theauto-enhancement, in some embodiments, comprises a predetermined set ofedit instructions that are placed in the instruction set 1515. Someembodiments perform an analysis of the image and then define a set ofinstructions based on the analysis. For instance, the auto-enhance toolwill attempt to detect red-eye in the image, but if no red-eye isdetected then no instructions will be generated to correct it.Similarly, automatic color balancing will be based on an analysis of theimage. The rotations generated by the rotation button are also stored asedit instructions.

The flag button 1452 tags any selected image as flagged. In someembodiments, the flagged images of a collection can be displayed withoutany of the unflagged images. The favorites button 1453 allows a user tomark any selected images as favorites. In some embodiments, this tagsthe image as a favorite and also adds the image to a collection offavorite images. The hide button 1454 enables a user to tag an image ashidden. In some embodiments, a hidden image will not be displayed in thethumbnail display area and/or will not be displayed when a user cyclesthrough the images of a collection in the image display area. As shownin FIG. 15, many of these features are stored as tags in the image datastructure.

Finally, the settings button 1455 activates a context-sensitive menuthat provides different menu options depending on the currently activetoolset. For instance, in viewing mode the menu of some embodimentsprovides options for creating a new album, setting a key image for analbum, copying settings from one image to another, and other options.When different sets of editing tools are active, the menu providesoptions related to the particular active toolset.

One of ordinary skill in the art will recognize that the image viewingand editing GUI 1400 is only one example of many possible graphical userinterfaces for an image viewing, editing, and organizing application.For instance, the various items could be located in different areas orin a different order, and some embodiments might include items withadditional or different functionalities. The thumbnail display area ofsome embodiments might display thumbnails that match the aspect ratio oftheir corresponding full-size images, etc.

III. Interaction in Different GUI Modes

FIG. 14, above, illustrated a particular graphical user interface 1400of an image viewing, editing, and organization application. In someembodiments, the application provides multiple GUI modes, of which theGUI 1400 is only one. These modes may differentiate between portrait andlandscape orientations, between left- and right-handed users, or otherfactors. Some embodiments have three different modes—portrait,left-handed landscape, and right-handed landscape. These modes presentthe same GUI items and display areas to the user, but arranged indifferent manners.

A. Left and Right Handed GUI

Some embodiments provide both a left-handed GUI and a right-handed GUI,between which users can switch. The different options may be presentedin both portrait and landscape modes, or only in landscape. In someembodiments, to switch between the left-handed GUI and the right-handedGUI, the user moves a specific GUI item (e.g., the thumbnail displayarea) within the GUI. As a result of moving the specific GUI item from afirst position to a second position, the application switches fromproviding the right-handed GUI to providing the left-handed GUI, or viceversa. The differences between the two GUIs, in some embodiments, arenot only the location of the specific GUI item, but also the locationand order (e.g., left to right order) of additional sets of GUI items.

FIG. 16 illustrates a GUI 1600 over four stages 1610-1640 in which theuser moves a thumbnail display area 1605 from the left side to the rightside of the GUI in order to switch from right-handed mode to left-handedmode. The GUI 1600 includes the thumbnail display area 1605, an imagedisplay area 1615, a first set of GUI items 1625 (the grid on/off, help,and undo buttons), a back button 1635, a second set of GUI items 1645(the share, info, and toggle original buttons), an edit button 1650, athird set of GUI items 1655 (the edit tool activation buttons), and asettings menu button 1660

The first stage 1610 illustrates the GUI 1600 in right-handed mode. Inthe right-handed mode, the thumbnail display area 1605 is situated onthe left-side of the GUI. The back button 1635 and the first set of GUIitems 1625 are situated on the left of the upper toolbar, the editbutton 1650 and the second set of GUI items 1655 are situated on theright of the upper toolbar, the third set of GUI items 1655 are situatedat the bottom left (below the thumbnail display area), and the settingsmenu button is situated at the bottom right. This stage additionallyshows that a user has placed a finger over the thumbnail display area inorder to perform a touch gesture on the display area. In someembodiments, the thumbnail display area includes a header area that canbe selected in order to move the display area.

The second stage 1620 illustrates that the user is in the midst ofexecuting a drag (or swipe) gesture with one finger. To perform such agesture, the user presses the finger down over the thumbnail displayarea and slides the finger along the touchscreen to the right, withoutreleasing contact. As the user moves her fingers over the touchscreen,the application moves the thumbnail display area 1605 along with thefinger.

The third stage 1630 illustrates that the user has moved the touchscreenfurther to the right along the touchscreen. In addition, this figureshows that as the user releases contact with the screen, the thumbnaildisplay area 1605 snaps to the right edge of the GUI 1600. In someembodiments, when the user releases contact with the display area on theleft side of the GUI, the thumbnail display area automatically snapsback to that side, and the same for the right side.

The fourth stage 1640 illustrates the GUI 1600 in left-handed mode afterthe user has released the thumbnail display area. In the left-handedmode, most of the GUI tools have switched sides. The settings menubutton 1660 is now situated in the bottom left, while the third set ofGUI items 1655 is situated in the bottom right. The third set of GUIitems 1655 maintain their left to right order, from the crop activationbutton to the effects activation button. These items are arranged in thetypical order in which the user will make edits to an image (croppingand rotating the image first, next adjusting exposure and color, thenusing the brushes for touchups, and finally applying any special effectsto the image). As such, these tools are arranged in the same order inboth GUI modes.

The sets of tools in the upper toolbar, however, switch places andreverse order. The back button 1635 and the edit button 1650 are fixed(except in that the entire toolbar slides to the left to accommodate thethumbnail display area 1605) as the leftmost and rightmost buttons,respectively. However, the first set of GUI items 1625 and the secondset of GUI items 1645 switch locations and reverse their order. Thefirst set of GUI items 1625 is now situated next to the edit button1650, though in the opposite left to right order. Similarly, the secondset of GUI items 1645 is now located next to the back button 1635, alsoin the opposite left to right order. These items that are not arrangedin a particular order thereby maintain their relative positions to thethumbnail display area 1605.

In some embodiments, the GUI also includes the auto-enhance, rotation,flag, favorite, and hide buttons, as illustrated in FIG. 14. In somesuch embodiments, these GUI items remain in the bottom center of the GUIwhen in left-handed mode and stay in the same order. In otherembodiments, however, the auto-enhance button is on the right side ofthis set of items while the hide button is on the left side inleft-handed mode.

While this figure illustrates the user making the drag gesture with theleft hand in order to switch to the left-handed GUI, some embodimentsallow the user to drag the thumbnail display area in either directionwith a finger of either hand (or with a different gesture, such as atwo-finger drag, a swipe, etc.). In this sense, the GUIs are notresponsive to which hand the user actually uses, but rather to thelocation of the thumbnail display area. On the other hand, theapplication of some embodiments can recognize which hand the user isusing (e.g., based on the relative positions of different contacts ofthe touchscreen) and switch the display accordingly. Other embodimentscan differentiate between hands for certain gestures (e.g., asimultaneous touch of all five fingers to the center of the screen) anduse these gestures as commands to switch from one mode to the other.

In addition to having left- and right-handed GUI modes, some embodimentsdisplay the image viewing and editing GUI differently in portrait andlandscape modes. In some embodiments, the thumbnail display area islocated in a different area of the display when in portrait mode ascompared to either left-handed or right-handed landscape mode. Forexample, in some embodiments the application displays the thumbnaildisplay area at the bottom of the portrait GUI.

Some embodiments determine the location of the various GUI items inportrait mode based on the most recently used landscape mode for theapplication. For example, some embodiments operate on devices with abuilt-in accelerometer or gyroscope that identifies whether the deviceis oriented upright or sideways, and provides this information throughthe operating system to the applications. When the user reorients thedevice to portrait mode, some embodiments align the GUI elements of theimage-viewing application based on the landscape mode to which the GUIwas set before the reorientation.

FIGS. 17-19 illustrate left-handed and right-handed GUI modes of someembodiments, in both portrait and landscape mode. Rather thanillustrating the GUI implementation of some embodiments shown in FIG. 14and other figures above, these figures illustrate an image viewing andediting GUI 1700 used for the mobile phone and media playerimplementation of some embodiments.

FIG. 17 illustrates the GUI 1700 over three stages 1710-1730 as a deviceon which the image viewing application operates is rotated from portraitmode to landscape mode. As shown in FIG. 17, the GUI 1700 includes athumbnail display area 1705, an image display area 1715, a first toolbar1725 (located at the bottom of the GUI), and a second toolbar 1727(located at the top of the GUI).

The first toolbar 1725 includes an auto-enhance button 1730, a rotationbutton 1735, a flag button 1740, a favorites button 1745, a hide button1750, a settings button 1755, and a toolbox button 1760. The various GUIitems 1730-1755 operate in the same manner as described above byreference to FIG. 14. The toolbox 1760 of some embodiments allows a userto access various different sets of editing tools. In some embodiments,when a user selects the toolbox 1760, the items 1730-1750 disappear andare replaced by GUI items similar to the items 1445-1449 (a crop item,exposure item, color item, brushes item, and effects item).

The second toolbar 1727 includes a back button 1765, a grid button 1770,a show original button 1780, a share button 1785, and an edit button1790. These GUI items also operate in the same manner as described aboveby reference to FIG. 14. In some embodiments, the help feature and undofeature can be accessed through the settings item 1755 rather thanhaving separate items.

The first stage 1710 of FIG. 17 illustrates the GUI 1700 in portraitmode, with the device on which the application operates held in anupright position. In the second stage 1720, the user has begun to turnthe device sideways. Not until the third stage 1730, when the device hasbeen rotated a full 90 degrees, does the application switch fromdisplaying the GUI in portrait mode to landscape mode. In someembodiments, the device contains an accelerometer or gyroscope, fromwhich the operating system of the device determines whether the deviceshould be in portrait or landscape mode. This determination is passed tothe application, which outputs the appropriate GUI.

The third stage 1730 illustrates the landscape mode GUI 1700 of someembodiments. The GUI includes the same set of UI items in the upper andlower toolbars, although the items are more spread out. In addition, thethumbnail display area 1705 is on the left rather than the bottom of thedisplay. In this case, the portrait mode GUI was in right-hand mode(i.e., in stages 1710 and 1720), and therefore when the applicationswitches to landscape, it uses the right-hand landscape mode for the GUI1700.

FIG. 18 illustrates the GUI 1700 over four stages 1810-1840 in which theuser moves the thumbnail display area 1705 from the left side of the GUIto the right side of the GUI in order to switch from right-handed modeto left-handed mode. The touch gesture used to drag the thumbnaildisplay area 1705 over the first three stages 1810-1830 is a similargesture to that shown above in FIG. 16. The fourth stage 1840illustrates the GUI 1700 in left-handed mode, with the thumbnail displayarea 1705 on the right side of the GUI. In this implementation, theapplication reverses the order of GUI items 1730-1760 in the toolbar1725, with the toolbox icon 1760 now on the right and the settings icon1755 on the left, and the auto-enhance, rotate, flag, favorites, andhide items also reversed.

FIG. 19 illustrates the GUI 1700 over three stages 1910-1930 as the userrotates the device on which the application operates back to portraitmode. In this case, however, the application is operating in left-handedmode while in landscape mode. As a result, at stage 1930, the GUI itemsin the toolbar 1725 are reversed as compared to the right-hand portraitmode shown in FIG. 17.

B. Interactions with Thumbnail Display Area

In either left- or right-handed mode, the image viewing applicationenables various interactions with the thumbnail display area (alsoreferred to below as the thumbnail grid). Users can change the size ofthe thumbnail display area, change the number of columns of thumbnails,and scroll through the thumbnails. FIG. 20 conceptually illustrates astate diagram 2000 showing states and changes in the state for thethumbnail display area in the image viewing GUI of some embodiments. Oneof ordinary skill will recognize that this state diagram does not coverevery possible interaction with the thumbnail display area. Forinstance, the state diagram does not cover scrolling through thethumbnails or the selection of thumbnails. Furthermore, although thestate diagram indicates different states for left- and right-handed GUImodes, the equivalents of states that are shown for one mode are omittedfor the other mode in the interest of simplicity. The state diagram 2000will be described by reference to FIGS. 21-28, which illustrate variousinteractions with the GUI 1600 in both left- and right-handed mode.

When the user is not interacting with the GUI, it will be in eitherstate 2005 (right-handed mode with the thumbnail grid on the left sideof the GUI) or in state 2050 (left-handed mode with the thumbnail gridon the right side of the GUI). As shown in the above FIG. 16, the usercan cause a transition from state 2005 to state 2050 by dragging thethumbnail grid from the left side of the GUI to the right side of theGUI. Conversely, when the user drags the thumbnail grid from the rightside of the GUI to the left side, the GUI transitions from state 2050 tostate 2005.

The user can increase and decrease the width and/or number of columns ofthe thumbnail grid in some embodiments by dragging the boundary (orseam) between the thumbnail grid and the image display area. The statediagram 2000 illustrates the states describing such input events whenthe GUI is in right-handed mode (state 2005), but one of ordinary skillin the art will recognize that the opposite directions of movement willapply to otherwise equivalent states when in left-handed mode (state2050). In some embodiments, the thumbnail grid has a default width oftwo columns when the application is initialized.

While in state 2005, when the user selects the boundary between thethumbnail grid and the image display area and moves to the right, theGUI transitions to state 2010 to display a progressively wider thumbnailgrid. In some embodiments, the user selects the boundary by placing asingle finger on the touchscreen over the boundary (i.e., so that thecontact area includes both part of the thumbnail grid and part of theimage display area). So long as the user continues moving her finger tothe right, the thumbnail grid keeps widening. If the user releases theboundary (e.g., by removing her finger from the touchscreen), then theGUI returns to state 2005.

When the user has moved the boundary a threshold distance, theapplication transitions to state 2015 to add a column of thumbnails.This causes a rearrangement of the thumbnails in the thumbnail grid. Theapplication of some embodiments orders the thumbnails (when the grid hastwo columns) with the first two on the top row, the next two on thesecond row, etc. When the number of columns expands to three, the firstthumbnail from the second row moves up to the top row, both of thethumbnails from the third row move to the second row, etc.

FIG. 21 illustrates a user increasing the size of the thumbnail displayarea over four stages 2110-2140 of GUI 1600. As shown, in the firststage 2110, the user places a finger over the boundary between thethumbnail display area 1605 and the image display area 1615. In someembodiments, the application does not actually draw a boundary line, orseam, but instead the boundary is simply visible as a result of thechange in color between the thumbnail display area and the image displayarea. For clarity's sake, however, these figures illustrate such aboundary.

In the second and third stages 2120 and 2130, the user drags theboundary to the right. At the fourth stage 2140, the boundary has beenmoved far enough for the thumbnails to rearrange into a third column. Asshown, the thumbnail 2105 of the clouds moves up to the top row, and theother thumbnails rearrange as well. This figure illustrates (as does thestate diagram 2000) the thumbnail display area 1605 expanding (and theimage display area correspondingly shrinking) before the third column iscreated. However, some embodiments move the boundary only in discreteamounts—i.e., once the user's finger has moved the threshold distanceover the screen, the application automatically changes the width of thethumbnail display area from a two-column width to a three-column width.That is, as the user moves her finger away from the boundary, the GUIremains static until a threshold movement has been reached, at whichpoint the thumbnail display area dynamically rearranges to add anothercolumn as the boundary moves by a fixed amount to the right, therebyreducing the size of the image display area.

Returning to the state diagram 2000, after adding the column ofthumbnails, the GUI transitions either back to state 2010 if the touchmovement continues and the thumbnail grid has not reached the maximumsize, or to state 2020 if the maximum number of columns has beenreached. When the maximum number of columns is reached, the applicationstops allowing the expansion of the grid area (at state 2020). In someembodiments, the application only allows the thumbnail display area tohave one, two, or three columns of thumbnails; other embodiments (e.g.,those on smaller devices) only allow one or two columns. At any of thesethree states, if the user releases the boundary (i.e., by removing thetouch input), the application transitions back to state 2005.

Similar state changes occur when the user drags the boundary between thethumbnail display area and the image display area towards the edge ofthe screen. Again, these state changes are shown in FIG. 20 for when theGUI is in right-handed mode, but are equally applicable to the GUI inleft-handed mode (with the movement in the opposite direction).

While in state 2005, when the user selects the boundary between thethumbnail grid and the image display area and moves to the left, the GUItransitions to state 2010 to display a progressively narrower thumbnailgrid. In some embodiments, the user selects the boundary by placing asingle finger on the touchscreen over the boundary (i.e., so that thecontact area includes both part of the thumbnail grid and part of theimage display area). So long as the user continues moving her finger tothe left, the thumbnail grid keeps narrowing. If the user releases theboundary (e.g., by removing her finger from the touchscreen), then theGUI returns to state 2005.

When the user has moved the boundary a threshold distance, theapplication transitions to state 2030 to remove a column of thumbnails.This causes a rearrangement of the thumbnails in the thumbnail grid. Theapplication of some embodiments orders the thumbnails (when the grid hastwo columns) with the first two on the top row, the next two on thesecond row, etc. When the number of columns is reduced to one, thesecond thumbnail from the top row moves to the second row, the firstthumbnail in the second row moves to the third row, etc.

FIG. 22 illustrates a user decreasing the size of the thumbnail displayarea over four stages 2210-2240 of GUI 1600. As shown, in the firststage 2210, the user places a finger over the boundary between thethumbnail display area 1605 and the image display area 1615. In someembodiments, the application does not actually draw a boundary line, orseam, but instead the boundary is simply visible as a result of thechange in color between the thumbnail display area and the image displayarea. For clarity's sake, however, these figures illustrate such aboundary.

In the second stage 2220, the user has started dragging the boundary tothe left. In this figure, once the boundary begins to encroach on thesecond column, the application rearranges the thumbnails into a singlecolumn. As shown, the thumbnail 2205 of the kayak moves down to thesecond row, and the other thumbnails rearrange as well. In the thirdstage 2230, the user continues to drag the boundary to the left.Finally, at the fourth stage 2240, the thumbnail display area 1605 hasreached its minimum width and cannot keep shrinking. This figure (andthe state diagram 2000) illustrates the thumbnail display area 1605shrinking (and the image display area correspondingly decreasing) in acontinuous manner. However, as with the increase in the thumbnaildisplay area described above, some embodiments move the boundary only indiscrete amounts—i.e., once the user's finger has moved the thresholddistance over the screen, the application automatically changes thewidth of the thumbnail display area from a two-column width to aone-column width.

Returning to the state diagram 2000, after removing the column ofthumbnails, the GUI transitions either back to state 2025 if the touchmovement continues and the thumbnail grid has not reached the maximumsize, or to state 2035 if the maximum number of columns has beenreached. When the maximum number of columns is reached, the applicationstops allowing the expansion of the grid area (at state 2020). In someembodiments, the application only allows the thumbnail display area tohave one, two, or three columns of thumbnails; other embodiments (e.g.,those on smaller devices) only allow one or two columns. At any of thesethree states, if the user releases the boundary (i.e., by removing thetouch input), the application transitions back to state 2005. Inaddition, from the expansion state 2010, the GUI can transition to state2025 (or vice versa) if the user reverses the direction of movement ofthe touch input over the boundary.

In addition to modifying the size and number of columns of the thumbnaildisplay area, some embodiments allow the user to slide the thumbnaildisplay area out of the GUI and back onto the GUI. This may beaccomplished, in some embodiments, via a swipe gesture or the selectionof GUI item, as well as other GUI interactions (e.g., a hotkey or set ofhotkeys, selection of a menu option, etc.). The state diagram 2000conceptually illustrates these interactions in the context of aleft-handed GUI (with the thumbnail display area on the right side), butthese interactions are equally applicable (with the directions reversed)to the right-handed GUI.

As shown, with the GUI in state 2050 (left-handed mode with thethumbnail grid displayed), when the user performs a rightwards swipegesture over the grid, or selects the grid button UI item, the GUItransitions to state 2055 to slide the grid off the right side of thedisplay. Once the grid has slid off the display, the GUI transitions tostate 2060 to display the GUI in left-hand mode without the thumbnailgrid.

FIG. 23 illustrates such a swipe gesture to remove the thumbnail displayarea 1605 from the GUI 1600 while in the right-handed GUI mode over fourstages 2310-2340. As shown, at the first stage 2310, the user begins tocontact the touchscreen over the thumbnail display area 1605 with onefinger (though other swipe gestures with different numbers of points ofcontact, or other gestures altogether may be used). The second stage2320 illustrates the user moving her finger to the left, causing thethumbnail display area to being sliding in that direction. In the thirdstage 2330, the user has released the swipe gesture as the thumbnaildisplay area 1605 continues to slide out of the GUI to the left. Thefourth stage 2340 illustrates that the thumbnail display area is nolonger shown in the GUI, and the image display area 1615 has expanded.Based on the location of the various user interface tools, the user caneasily tell that the GUI is still in right-handed mode.

In some embodiments, the application requires the user's finger toremain in contact with the touchscreen for a particular thresholddistance and/or move at a threshold speed in order to qualify as a swipegesture. However, in some embodiments this determination as to whetheran input qualifies as a swipe gesture is made by the operating system ofthe device on which the image viewing application operates, rather thanthe application itself. The swipe gesture and location are passed fromthe operating system to the application, which then translates thatswipe gesture into instructions to slide the thumbnail grid out of theGUI.

FIG. 24 illustrates a similar swipe gesture to remove the thumbnaildisplay area 1605 from the GUI 1600 while in the left-handed mode overfour stages 2410-2440. These stages parallel the stages of FIG. 23. Asshown, at the first stage 2410, the user begins to contact thetouchscreen over the thumbnail display area 1605 with one finger (thoughother swipe gestures with different numbers of points of contact, orother gestures altogether may be used). The second stage 2420illustrates the user moving her finger to the right, causing thethumbnail display area to begin sliding in that direction. In the thirdstage 2430, the user has released the swipe gesture as the thumbnaildisplay area 1605 continues to slide out of the GUI to the right. Thefourth stage 2440 illustrates that the thumbnail display area is nolonger shown in the GUI, and the image display area 1615 has expanded.Based on the location of the various user interface tools, the user caneasily tell that the GUI is still in left-handed mode.

As shown in FIG. 20, some embodiments also transition from state 2050 tostate 2055 and then 2060 when a user selects a grid button that causesthe thumbnail display area to slide on and off of the GUI. FIG. 25illustrates the selection of such a GUI item 2505 in the GUI 1600 overfour stages 2510-2540. As shown, in the first stage 2510, the user tapsthe grid button 2505. As with the swipe gestures, in some embodimentsthe operating system of the device translates the screen contactinformation into a tap gesture and a location and passes thisinformation to the image-viewing application. The second stage 2520 andthird stage 2530 illustrate the thumbnail display area 1605 sliding outof the GUI. The resultant GUI shown in stage 2540 is the same as theresultant GUI at the end of FIG. 23, with an expanded image display area1615.

With the GUI in state 2060 (the left-handed mode without the thumbnailgrid), when the user either performs a leftward sweep gesture from theright edge of the GUI or selects the grid button UI item, the GUItransitions to state 2065 to slide the grid from the right side backonto the display. Once the grid has slid back onto the display, the GUItransitions back to state 2050 to display the GUI in left-handed modewith the thumbnail grid present.

FIG. 26 illustrates such a swipe gesture to return the thumbnail displayarea 1605 to the GUI 1600 while in the right-handed GUI mode over fourstages 2610-2640. As shown, at the first stage 2610, the user begins tocontact the touchscreen near the left edge of the GUI with one finger(though other swipe gestures with different numbers of points ofcontact, or other gestures altogether may be used). Differentembodiments use different thresholds to determine how close the touchcontact needs to be in order to be considered close to the edge forsliding the thumbnail display area back onto the GUI. The second stage2620 illustrates the user moving her finger to the right, causing thethumbnail display area 1605 to begin sliding in that direction back ontothe GUI. In the third stage 2630, the user has released the swipegesture as the thumbnail display area 1605 continues to slide onto theGUI to the right. The fourth stage 2640 illustrates that the thumbnaildisplay area 1605 is fully present in the GUI, in the right-handed mode.

FIG. 27 illustrates a similar swipe gesture to return the thumbnaildisplay area 1605 to the GUI 1600 while in the left-handed GUI mode overfour stages 2710-2740. As shown, at the first stage 2710, the userbegins to contact the touchscreen near the right edge of the GUI withone finger (though other swipe gestures with different numbers of pointsof contact, or other gestures altogether may be used). Differentembodiments use different thresholds to determine how close the touchcontact needs to be in order to be considered close to the edge forsliding the thumbnail display area back onto the GUI. The second stage2720 illustrates the user moving her finger to the left, causing thethumbnail display area 1605 to begin sliding in that direction back ontothe GUI. In the third stage 2730, the user has released the swipegesture as the thumbnail display area 1605 continues to slide onto theGUI to the left. The fourth stage 2340 illustrates that the thumbnaildisplay area 1605 is fully present in the GUI, in the left-handed mode.

As shown in FIG. 20, some embodiments also transition from state 2060 tostate 2065 and then 2050 when a user selects a grid button that causesthe thumbnail display area to slide on and off of the GUI. FIG. 28illustrates the selection of such a GUI item 2505 in the GUI 1600 overfour stages 2810-2840 while the GUI is in right-handed mode. As shown,in the first stage 2810, the user taps the grid button 2505. As with theswipe gestures, in some embodiments the operating system of the devicetranslates the screen contact information into a tap gesture and alocation and passes this information to the image-viewing application.The second stage 2820 and third stage 2830 illustrate the thumbnaildisplay area 1605 sliding back onto the GUI. The resultant GUI shown instage 2840 is the same as the resultant GUI at the end of FIG. 26, withthe thumbnail display area 1605 appearing on the left side of thedisplay.

The above description and figures highlighted various aspects ofinteracting with the GUI in left-handed and right-handed mode. Inaddition, certain differences exist between landscape mode (whetherright-handed or left-handed) and portrait mode. One such differenceinvolves the location and scrolling of the thumbnail display area.

FIG. 29 illustrates a user scrolling through the thumbnail display area1605 over four stages 2910-2940 of the GUI 1600. In the first stage2910, the user has begun to contact the touchscreen with one finger overthe thumbnail display area 1605. As shown in the second stage 2920, theuser moves the finger upwards while maintaining contact with thetouchscreen. This has the effect of causing the thumbnails in thethumbnail display area to slide upwards, such that the top thumbnailsdisappear off of the screen and additional thumbnails appear at thebottom. At stage 2930, the user continues this motion to continuescrolling through thumbnails. The fourth stage 2940 illustrates that theuser has released the drag operation and the thumbnails have stoppedscrolling. In some embodiments, depending on the speed of the drag/sweepgesture, the thumbnails may continue scrolling after the user releasesthe gesture (i.e., momentum scrolling). As all collections will containa finite number of images, eventually the thumbnails will reach an endand stop scrolling. Furthermore, while this figure only shows scrollingdown (via an upward touch gesture), users can also scroll up by draggingthe thumbnail display downwards.

The above figures illustrate a GUI in both left- and right-handedlandscape modes. FIGS. 30-32, on the other hand, illustrate a GUI 3000of some embodiments in portrait mode. The GUI 3000, as shown in FIG. 30,includes a thumbnail display area 3005, an image display area 3015, afirst set of GUI items 3025, a second set of GUI items 3035, a third setof GUI items 3045, a back button 3050, an edit button 3055, and asettings menu activation item 3060. These are the same items asdescribed above by reference to the GUI 1600 of FIG. 16.

As shown in these figures, the application displays the GUI items 3025,3035, and 3045-3060 in the same positions as in the right-handed mode ofthe landscape GUI 1600 (i.e., the edit activation GUI items 3025 on thebottom left, the back button 3050 and second set of GUI items 3035 onthe top left, etc.). When in portrait mode, some applications do notprovide a mechanism to switch from left-handed mode to right-handedmode, as the thumbnail display area 3005 is located at the bottom of theGUI anyway. Other embodiments, as mentioned above, may respond to anaction indicative of the handedness of the user, such as a tap of fivefingers at once (the relative locations being different for a left handcompared to a right hand). As described above, some embodimentsdetermine the location of the various GUI items in portrait mode basedon the most recently used landscape mode for the application.

FIG. 30 illustrates the GUI 3000 as a user scrolls through thethumbnails of a collection in the thumbnail display area over fourstages 3010-3040. In portrait mode, as shown, the application locatesthe thumbnail display area 3005 at the bottom of the GUI, although inother embodiments the thumbnail display might be at the top of the GUI.The thumbnail display area 3005 spans the width of the GUI, with a fixednumber of columns of thumbnails (in this case five). In this figure, thethumbnail display area has a height of two thumbnails.

In the first stage 3010, the user contacts the thumbnail display areawith one finger. As shown in the second stage 3020, the user has begunto slide the finger up over the thumbnail display area. This causes thethumbnails to slide upwards through the thumbnail display area 3005,with new thumbnails beginning to appear at the bottom of the displayarea. The third stage 3030 illustrates that the user has continued toslide her finger upwards, with the thumbnails moving along as well. Inthe fourth stage 3035, the user has released contact with thetouchscreen, and therefore the thumbnails are no longer moving (althoughin some embodiments, the user can set the application or device tocontinue scrolling after a swipe gesture, based on the speed of thegesture).

FIG. 31 illustrates the modification of the size of the thumbnaildisplay area 3005 over four stages 3110-3140 of the portrait GUI 3000.As in landscape mode, the user can drag the boundary between thethumbnail display area 3005 and the image display area 3015 in order tomodify the size of the thumbnail display area. However, whereas inlandscape mode this boundary moves perpendicular to the direction ofscrolling (and thus results in a rearrangement of the thumbnails when athreshold is passed and a column is added or subtracted), the boundaryin portrait mode moves parallel to the direction of scrolling. As such,for the most part the thumbnail display area can be modified in acontinuous manner without rearranging the thumbnails, rather than havingdiscrete jumps when a column is added or subtracted.

The first stage 3110 illustrates the GUI 3000 with the thumbnail displayarea having a height of approximately two thumbnails. In the secondstage 3120, the user places a finger over the boundary between thethumbnail display area 3005 and the image display area 3015 and beginsdragging the boundary downwards. In this case, the thumbnails move alongwith the boundary (i.e., the relationship of the boundary to thethumbnails does not change). In other embodiments, the thumbnails remainstatic during such a modification to the boundary, and the boundarymoves over the thumbnails. When the user moves the boundary upwards andreaches the top row of thumbnails, some such embodiments then begin tomove the thumbnails up with the boundary in order to prevent a gap fromappearing at the top of the thumbnail display area.

The third stage 3130 illustrates that the user has continued to drag theboundary downwards, sliding the thumbnails further along as well. At thelast stage 3140, the thumbnail display area 3005 has a height of onlyone row. In some embodiments, when the thumbnail display area inportrait mode is reduced to only one row of thumbnails, the applicationautomatically prevents the thumbnail display area from being reduced insize (although the user can still tap the grid button or use a swipegesture to remove the thumbnail display area altogether) and modifiesthe direction of scrolling from vertical to horizontal. The applicationrearranges the thumbnails into a single row in the order they are storedin the currently selected collection, although the displayed thumbnailsmay appear the same to the user until the user begins to scroll.

FIG. 32 illustrates the horizontal scrolling of the thumbnail displayarea when sized down to one row, over four stages 3210-3240 of the GUI3000. The first stage 3210 illustrates the GUI 3000 in the same state asat stage 3140 of FIG. 31, with the thumbnail display area 3005 having aheight of one row. As shown, the user has begun to contact the thumbnaildisplay area with one finger. The user begins moving her finger to theleft in the second stage 3220, and continues this movement in the thirdstage 3230. The result of this movement is that the thumbnails scroll tothe left through the thumbnail display area 3005, with some thumbnailsscrolling off the GUI to the left and new thumbnails entering from theright. In some embodiments, the scrolling stops when the user reachesthe end of the collection, while other embodiments wrap the thumbnailsaround in a continuous scrolling fashion. The fourth stage 3240illustrates that the user has released contact with the touchscreen, andthe thumbnails are now stationary.

FIG. 33 illustrates a user scrolling through images in the thumbnaildisplay area of the mobile phone and media player GUI 1700 of someembodiments. In the first stage 3310, a first thumbnail 3305 isselected, and the corresponding image 3315 has been displayed in theimage display area 1715. However, the user is currently performing aswipe gesture to the left over the image display area, beginning toreveal the next image in the collection. The second stage 3320illustrates the result of this swipe gesture, with the image 3325 nowdisplayed and the corresponding thumbnail 3335 selected. While not shownin the above figures, in some embodiments a user of the application on alarger (e.g., tablet) device may also use similar swipe gestures (bothright and left) to quickly scan through the images in a collection.Scanning through sets of selected images with swipe gestures will alsobe described below in Section V.

The second through fourth stages 3320-3340 illustrate the user scrollingsideways through the thumbnail display area 1705 with a swipe gesture.As shown, the user swipes a finger sideways across the thumbnail displayarea, and the thumbnails slide through, as in FIG. 32 above.

While the above figures illustrate scrolling through the thumbnaildisplay areas (whether in portrait or landscape mode) using touchscreengestures (including multi-touch gestures), one of ordinary skill in theart will recognize that the described features of FIGS. 29-33 (as wellas the other features shown throughout this document) may be performedin other manners—e.g., using a cursor controller device (which mayinvolve a combination of button clicks, movement of the cursorcontroller, and touch input through the cursor controller), a keyboard,etc.

C. Zoom Tool

Subsection A of this section described an application with differentGUIs for left- and right-handed modes, in which the application modifiesthe location and order of certain GUI elements while leaving others inthe same place when switching between modes. In addition, someembodiments activate certain GUI tools differently (e.g., in differentorientations) depending on whether the GUI is in the left-handed mode orthe right-handed mode. One such tool is the zoom tool of someembodiments, which is displayed in different orientations and respondsto certain gestures differently depending on which mode of the GUI isactive.

FIG. 34 conceptually illustrates a process 3400 of some embodiments forinvoking such a zoom tool. The process 3400 will be described byreference to FIGS. 35 and 36, which illustrate the invocation of thezoom tool within the right-handed and left-handed media-editing andviewing GUIs of some embodiments. The image viewing, editing, andorganization application of some embodiments performs the process 3400in response to a particular user input (e.g., touch) gesture receivedthrough the user interface of the application. However, some embodiments(e.g., some mobile phone and media player implementations of theapplication) do not include such a zoom tool.

As shown, the process begins by receiving (at 3405) two separate touchinputs over an image in the image display area while in the viewingmode. In some embodiments, the application is in viewing mode when theimage display area displays one or more images and one of the sets ofediting tools (e.g., the crop, exposure, color, brush, or specialeffects tools) have been activated. Some embodiments recognize twoseparate touch inputs as invoking the zoom tool when the two separatetouch inputs are at least partly coincidental. That is, the two separateinputs need not contact the touchscreen at the same time (i.e., a usercould place her thumb on the screen, then a second later contact thescreen with her index finger in order to invoke the zoom tool so long asthe thumb remains on the screen as well). Other embodiments placeconstraints on the time period between which the first and second touchinputs may be received (e.g., 0.5 seconds, 1 second, etc.). In addition,some embodiments only activate a zoom tool in response to touch inputswithin a threshold distance (e.g., an absolute distance such as 3 inchesor a distance relative to the size of the image).

Furthermore, some embodiments differentiate between a two-finger gestureand two separate gestures. Multi-touch devices can identify whether auser has placed one finger at a location on a touchscreen or multiplefingers together (e.g., for certain sweep gestures). These various touchgestures are detected by the device operating system and send to theapplication in some embodiments. When the application receives twoseparate gestures from the operating system at different locations overthe displayed image, the application invokes the zoom tool.

In response to receiving the two separate touch inputs, the process 3400outputs (at 3410) a sound effect that is associated with a zoom tooldisplay. In some embodiments, the sound effect mimics the sound of acamera shutter opening. Among other purposes, the sound effect indicatesto the user that the zoom tool is activated. In addition, someembodiments display an animation within the area covered by the zoomtool that gives the appearance of a camera shutter opening. While theprocess 3400 illustrates the application outputting the sound effectbefore displaying the zoom tool, one of ordinary skill in the art willrecognize that this is a conceptual process and the sound effect may beoutput in parallel with the display of the zoom tool.

The process also identifies (at 3415) a midpoint between the twoseparate touch inputs. As indicated, in some embodiments the applicationreceives gesture information from the operating system in response totouch inputs received from a user. The gesture information includes alocation at which each gesture is centered (e.g., screen pixelcoordinates). The application of some embodiments identifies themidpoint of the line connecting the center coordinates of each gesture(e.g., the mean x coordinate and mean y coordinate).

The process then determines (at 3420) whether the GUI is in aright-handed mode. As mentioned above by reference to FIG. 16, theimage-editing application of provides a right-handed GUI and aleft-handed GUI, between which users can switch. In some of theseembodiments, the image editing application stores a parameter thatindicates whether the GUI is in a right-handed mode or a left-handedmode. The application toggles the parameter when the user switchesbetween the two modes (e.g., by moving the thumbnail display area). Inthese embodiments, the process determines whether the GUI is in theright-handed mode by checking this stored parameter. In otherembodiments, the application uses the location of the thumbnail displayarea (or other GUI item) to determine whether the application iscurrently in left- or right-handed mode.

If the GUI is in the right-handed mode, the process displays (at 3425) azoom tool centered at the identified midpoint, with magnificationinformation displayed on the left side of the zoom ring. The processthen ends. In some embodiments, the zoom tool is a zoom ring thatappears as an ellipse (e.g., a circle) centered at the identifiedmidpoint between the two touch inputs. Other embodiments, however, usedifferent shapes (e.g., a square, hexagon, etc.). The magnificationinformation, in some embodiments, indicates to the user the zoom levelof the image inside the GUI control.

FIG. 35 illustrates an example of invoking and de-invoking a circularzoom tool through the GUI 3500 at four stages 3505-3520 while the GUI isin right-handed mode. The first and second stages 3505 and 3510 of FIG.35 illustrates the invocation of the zoom tool, while the third andfourth stages 3515 and 3520 illustrates the de-invocation of the zoomtool.

As shown, the GUI 3500 includes a thumbnail display area 3530 that islocated on the left side of the GUI 3500, an image display area 3545,and a toolbar 3540. The application displays an image 3555 within theimage display area 3545. As shown in the first stage 3505, the thumbnaildisplay area 3530 located on the left side of the GUI 3500, whichindicates that the GUI 3500 is in a right-handed mode. As none of theediting tool activation items in the toolbar 3540 are currentlyselected, the application is in viewing mode.

The second stage 3510 illustrates the GUI 3500 after a user has invokeda zoom tool on the image 3555. As mentioned above, the zoom tool can beinvoked by providing two separate touch inputs on an image. As shown,the user invokes the zoom tool by tapping two fingers at separatelocations over the image 3555, near a location that displays a golfball.

As a result of the two touch inputs, a zoom ring 3525 is overlaid on theimage 3555 centered at the midpoint between the two separate touchinputs (i.e., around a location in the image 3555 that includes a golfball, now shown as magnified). In addition, since the GUI is in theright-handed mode as indicated by the location of the thumbnail displayarea 3530, the magnification information 3535 is displayed on the leftside of the zoom ring 3525. This magnification information indicatesthat the current zoom level inside the zoom ring 3525 is 2×. Displayingthe magnification information on the left side of the zoom ring 3525makes this information easily visible to the user while her right handis over the zoom tool. As will be explained below, the user can userotation gestures in order to change the magnification level.

Referring back to FIG. 34, when the process 3400 determines that the GUIis not in a right-handed mode at operation 3420 (and thus that the GUIis in left-handed mode), the process displays (at 3430) a zoom toolcentered at the identified midpoint, with magnification informationdisplayed on the right side of the zoom ring. The process then ends. Insome embodiments, the zoom tool is a zoom ring (e.g., a circle) that hasthe same shape whether in left-handed or right-handed mode.

FIG. 36 illustrates an example of invoking a circular zoom tool throughthe GUI 3500 when the GUI is in a left-handed mode at two stages 3605and 3610. As shown, the first stage 3605 is identical to the first stage3505 of FIG. 35, except that the GUI 3500 in FIG. 36 is in left-handedmode, with the thumbnail display area 3530 located on the right side ofthe GUI 3500.

The second stage 3605 illustrates the GUI 3500 after the user hasinvoked a zoom tool on the image 3555. As mentioned above, the zoom toolcan be invoked by providing two separate touch inputs on an image. Asshown, the user invokes the zoom tool by tapping two fingers at separatelocations over the image 3555, near a location that displays a golfball.

As a result of the two touch inputs on the image 3555, a zoom ring 3525is overlaid on the image 3555 centered at the midpoint between the twoseparate touch inputs (i.e., around a location in the image 3555 thatincludes a golf ball, now shown as magnified). In addition, since theGUI is in the left-handed mode as indicated by the location of thethumbnail display area 3530, the magnification information 3535 isdisplayed on the right side of the zoom ring 3525. This magnificationinformation indicates that the current zoom level inside the zoom ring3525 is 2×. Displaying the magnification information on the right sideof the zoom ring 3525 makes this information easily visible to the userwhile her left hand is over the zoom tool. As will be explained below,the user can use rotation gestures in order to change the magnificationlevel.

With the zoom tool invoked and displayed over an image (i.e., overlaidon the image), the image editing application also allows the user todeselect or de-invoke the zoom tool. Different embodiments of theapplication provide different manners in which a user can deselect thezoom tool. For instance, the application of some embodiments removes thezoom tool when a touch input is received on the image but outside of thezoom tool.

Referring back to FIG. 35, the third and fourth stages 3515 and 3520illustrate an example of the deselection of a zoom tool through the GUI3500. The GUI in the third stage 3515 is identical to the second stage3510, with the zoom ring 3525 still overlaid on the image 3555, with thegolf ball and surrounding grass magnified. The fourth stage 3520illustrates the GUI 3500 after the user has deselected the zoom tool. Asmentioned, a user may deselect a zoom tool by providing a touch input onthe image outside of the zoom tool. As shown, the user has deselectedthe zoom tool 3525 by tapping a finger at a location on the image 3555outside of the zoom tool 3525. As a result of the single touch inputoutside of the zoom ring, the application removes the zoom ring 3525from the GUI 3500. In some embodiments, the application also displays asound effect (e.g., the sound of a camera shutter closing) as the zoomtool is de-invoked. Some embodiments also display a correspondinganimation of a camera shutter closing within the zoom tool as the toolis being removed.

In addition to simply invoking and removing the zoom tool of someembodiments, users can move the zoom tool to different locations in theimage in order to zoom in on different sections, modify themagnification level of the region shown within the zoom tool, andperform other operations. These operations will now be described byreference to FIG. 37.

FIG. 37 conceptually illustrates a state diagram 3700 that presentsvarious operations of the zoom tool within the GUI of some embodiments.One of ordinary skill in the art will recognize that the state diagram3700 does not encompass every state of the image viewing GUI, or evenevery state of the zoom tool, but instead only a subset of the zoom tooloperations within the image viewing GUI.

The state diagram 3700 will be described by reference to the UI examplesillustrated in FIGS. 38, 39, 41, 42, and 40. Specifically, FIGS. 38 and41 show the GUI of the image viewing and editing application of someembodiments in multiple stages related to the magnifying (i.e., zoomingin) operation of the zoom tool. FIGS. 39 and 42 show the GUI of theimage viewing and editing application of some embodiments in multiplestages related to the de-magnifying (i.e., zooming out) operation of thezoom tool. FIG. 40 shows the GUI of the image viewing and editingapplication of some embodiments in multiple stages related to therelocation (i.e., moving) of the zoom tool.

As shown in FIG. 37, the GUI has two initial states 3705 and 3710. Atthe initial state 3705, the GUI displays a thumbnail grid (i.e., athumbnail display area) and an image displayed in an image display areain the right-handed mode. The state 3710 is identical to the state 3705,with the exception that the GUI is in the left-handed mode instead of aright-handed mode, and thus the thumbnail grid is on the right side ofthe GUI. The various operations of the zoom tool in right-handed modewill be described first by reference to FIGS. 38, 39, and 40.

When the zoom tool receives two separate touch inputs over the image,the zoom tool transitions from the initial state 3705 to state 3715, atwhich the GUI displays a zoom ring on the image in the right-handedmode. As described above, the GUI provides two different versions of thezoom ring in some embodiments, one for the right-handed mode and one forthe left-handed mode. In some embodiments, the zoom right in theright-handed mode has the magnification information displayed on theleft side of the zoom ring. This enables the user to view themagnification information while her right hand is over the zoom ring.The operations of invoking and displaying the zoom ring in theright-handed mode are described in details above by reference to FIG.35.

The zoom tool stays at state 3715 so long as there is no input providedto affect the zoom ring. However, when a clockwise rotation input isreceived, the GUI transitions to state 3725 to increase themagnification of the area of the image within the zoom tool. In someembodiments, a user can provide a clockwise rotation input by puttingtwo fingers on the zoom ring and rotating the two fingers in a clockwisedirection. Some embodiments identify such input by tracking the locationof the inputs and measuring the angle (e.g., the angle off thehorizontal) of the line connecting the two locations. When this anglechanges in a clockwise manner, the application increases themagnification of the right-handed zoom tool. In some embodiments, thetwo touch inputs need not be located directly over the zoom tool, thoughdoing so will often help the user visualize the zoom in and zoom outmovements. After increasing the magnification of the area of the imagethat is inside the zoom ring, the GUI returns to state 3715 so long asthe user is not continuing to rotate her fingers in a clockwise manner.

FIG. 38 illustrates the magnification operation of the zoom tool throughthe GUI 3500 at four different stages 3805-3820. The first stage 3805 isidentical to the first stage 3505 of FIG. 35, with the thumbnail displayarea 3530 located on the left side of the GUI 3500, and the image 3555displayed in the image display area 3545 in viewing mode.

The second stage 3810 illustrates the GUI 3500 after the user hasinvoked the zoom tool by providing two separate touch inputs on theimage 3555. As shown, the user has tapped two fingers on the image 3555around the location of the golf ball. As a result of the two separatetouch inputs, the application overlays a zoom ring 3525 on the image3555 centered at the midpoint between the two separate touch inputs. Inaddition, as the GUI is in the right-handed mode, the applicationdisplays magnification information 3535 on the left side of the zoomring 3525. In some embodiments, the default magnification is a 2× zoom,with the magnification variable between 1× and 3×.

The third stage 3815 illustrates the GUI 3500 after the user has startedto increase the magnification of the image using the zoom tool. Asmentioned, the user can increase the magnification of the area of theimage inside the zoom tool by providing clockwise rotation input. Asshown, the user has begun to rotate the two fingers in the clockwisedirection, as indicated by the arrow 3825. As a result of the clockwiserotation input, the area of the image that is inside the zoom ring 3525is displayed as further magnified.

The fourth stage 3820 illustrates the GUI 3500 after the user hasfurther increased the magnification of the image using the zoom tool. Asshown, the user has continued to rotate the two fingers in the clockwisedirection, as indicated by the arrow 3830. As a result of the rotationmovement, the area of the image inside the zoom ring 3525 in the fourthstage 3820 is more magnified than the image in the third stage 3815. Atthis stage, the zoom tool is at the maximum 3× magnification level.

In some embodiments, the zoom tool will not magnify a portion of animage past its full size display. Images on smaller-screen devices areoften reduced in size in order to fit within the display of the device.For example, a 1920×1080 image may not be displayed at full size on a640×480 display screen. Using the zoom tool enables the user to view aportion of an image at closer to its full size. However, when an imageis already at its full size (e.g., a 640×480 image on a 1920×1080display screen), then some embodiments will not allow a user to invokethe zoom tool, as this would create pixelation within the zoomed area.

Referring back to FIG. 37, when the application receives acounter-clockwise rotation input while at state 3715, the GUItransitions to state 3735 to decrease the magnification of the area ofthe image within the zoom tool. In some embodiments, a user can providea counter-clockwise rotation input by putting two fingers on the zoomring and rotating the two fingers in a counter-clockwise direction. Aswith the clockwise rotation, some embodiments identify the input bytracking the location of the two inputs and measuring the angle of theline connecting the locations. After decreasing the magnification of thearea of the image inside the zoom ring, the GUI returns to state 3715 solong as the user is not continuing to rotate her fingers.

FIG. 39 illustrates the de-magnification operation of the zoom toolthrough the GUI 3500 at four different stages 3905-3920. The GUI 3500 atthe first stage 3905 is identical to the GUI at the fourth stage 3820 ofFIG. 38. As shown, the GUI 3500 includes the zoom ring 3525 at 3×magnification and the area of the image inside the zoom ring ismagnified.

The second stage 3910 illustrates the GUI 3500 after the user hasstarted to decrease the magnification of the image using the zoom tool.As mentioned, the user can decrease the magnification of the area of theimage inside the zoom ring by providing a counter-clockwise rotationinput. As shown, the user has begun to rotate the two fingers in thecounter-clockwise direction, as indicated by the arrow 3925. As a resultof the counter-clockwise rotation input, the application has decreasedthe magnification of the area of the image that is inside the zoom ring3525.

The third stage 3915 illustrates the GUI 3500 after the user has furtherdecreased the magnification of the image using the zoom tool. As shown,the user has continued to rotate the two fingers in thecounter-clockwise direction, as indicated by the arrow 3930. As a resultof the rotation movement, the area of the image inside the zoom ring3525 in the third stage 3915 is less magnified than at the second stage3910. The fourth stage 3920 illustrates the GUI 3500 after the user haslifted the two fingers off the zoom ring 3525. As shown, the area of theimage inside the zoom ring 3525 remains the same as the area of theimage in the third stage 3915 after the user has lifted off the fingers.

In addition to changing the magnification level of the zoom tool, someembodiments allow the user to move the tool around the image, therebyfocusing on different areas within an image. Referring back to FIG. 37,when the zoom tool receives a ring movement activation event, the zoomtool transitions to the move ring state 3745. In some embodiments, aring movement activation event includes a user pressing and holding afinger (i.e., a single touch) on the zoom ring. During the move ringstate 3745, the zoom ring follows the movement of the user's input. Thatis, the zoom ring moves to wherever the user moves the finger. The zoomtool stays in this state until receiving a zoom ring movementdeactivation event. In some embodiments, the user can deactivate thezoom ring movement operation by lifting the finger off the zoom ring.Upon receiving the zoom ring movement deactivation event, the zoom toolreturns to state 3715.

FIG. 40 illustrates the move operation of the zoom tool through the GUI3500 at four different stages 4005, 4010, 4015, and 4020. The firststage 4005 is identical to the first stage 3505 of FIG. 35. As shown,the GUI 3500 includes a thumbnail display area 3530 that is located onthe left side of the GUI 3500, an image display area 3545, and a menubar 3540. An image 3555 is displayed in the image display area 3545 in aview mode. In addition, FIG. 40 also shows that the GUI 3500 is in aright-handed mode, as indicated by the thumbnail display area 3530located on the left side of the GUI 3500.

The second stage 4010 illustrates the GUI 3500 after a user has invokedthe zoom tool. As shown, the user has invoked the zoom tool by providingtwo separate touch inputs on the image 3555. As a result of the twoseparate touch inputs, the application overlays the zoom ring 3525 onthe image 3555 centered at the midpoint between the two separate touch.In addition, as the GUI 3500 is in the right-handed mode (indicated bythe location of the thumbnail display area 3530), the GUI displays themagnification information 3535 on the left side of the zoom ring 3525.

The third stage 4015 illustrates the GUI 3500 after the user has startedto move the zoom ring 3525 with a touch gesture. In some embodiments, auser can move the zoom ring by placing a single finger on the zoom ring3525 and dragging the finger to another location on the image. As shown,the user has begun to drag the finger towards the upper right corner ofthe image 3555, as indicated by the arrow 4025. As a result of the dragmovement, the zoom ring 3525 moves toward the upper right corner of theimage 3555. The fourth stage 3915 illustrates the GUI 3500 after theuser has moved the zoom ring 3525 to another location on the image. Asshown, the user has dragged the finger toward the top of the image 3555,as indicated by the arrow 4030. As a result of the drag movement, thezoom ring 3525 now moves toward the top of the image 3555.

In some embodiments, the zoom tool can be deactivated by a zoom tooldeactivation event. For example, the zoom tool can be deactivated when asingle input is received outside of the zoom ring. Referring back toFIG. 37, when the zoom tool receives an input outside of the zoom ring(e.g., a single touch outside of the zoom ring) while at state 3715, thezoom tool transitions back to the initial state 3705. The deactivationoperation of the zoom ring of some embodiments is described in detailabove by reference to stages 3515 and 3520 of FIG. 35.

As described in detail above, a user can toggle the image-viewing andediting GUI from right-handed mode to left-handed mode by moving thethumbnail display area (i.e., the thumbnail grid) to the right side ofthe GUI. Thus, while at the initial state 3705, the zoom tooltransitions to the other initial state 3710 when the moves the thumbnailgrid to the right side of the display (and vice versa if the user movesthe thumbnail grid back to the left side). The various operations of thezoom tool that starts with the initial state 3710 will be now describedby reference to FIGS. 41 and 42. These operations are similar to theright-handed operations, except that the magnification andde-magnification operations are caused by rotation in the reversedirections.

When the zoom tool receives two separate touch inputs over the image,the zoom tool transitions from the initial state 3710 to state 3720, atwhich the GUI displays a zoom ring on the image in the left-handed mode.As described above, the GUI provides two different versions of the zoomring in some embodiments, one for the right-handed mode and one for theleft-handed mode. In some embodiments, the zoom right in the left-handedmode has the magnification information displayed on the right side ofthe zoom ring. This enables the user to view the magnificationinformation while her left hand is over the zoom ring. The operations ofinvoking and displaying the zoom ring in the left-handed mode aredescribed in details above by reference to FIG. 36.

The zoom tool stays at state 3720 so long as there is no input providedto affect the zoom ring. However, when a counter-clockwise rotationinput is received, the GUI transitions to state 3730 to increase themagnification of the area of the image within the zoom tool. In someembodiments, a user can provide a counter-clockwise rotation input byputting two fingers on the zoom ring and rotating the two fingers in acounter-clockwise direction. Some embodiments identify such input bytracking the location of the inputs and measuring the angle (e.g., theangle off the horizontal) of the line connecting the two locations. Whenthis angle changes in a counter-clockwise manner, the applicationincreases the magnification of the left-handed zoom tool. In someembodiments, the two touch inputs need not be located directly over thezoom tool, though doing so will often help the user visualize the zoomin and zoom out movements. After increasing the magnification of thearea of the image that is inside the zoom ring, the GUI returns to state3720 so long as the user is not continuing to rotate her fingers in acounter-clockwise manner.

FIG. 41 illustrates the magnification operation of the zoom tool throughthe GUI 3500 at four different stages 4105-4120. The first stage 4105 isidentical to the first stage 3605 of FIG. 36, with the thumbnail displayarea 3530 located on the right side of the GUI 3500, and the image 3555displayed in the image display area 3545 in viewing mode.

The second stage 4110 illustrates the GUI 3500 after the user hasinvoked the zoom tool by providing two separate touch inputs on theimage 3555. As shown, the user has tapped two fingers on the image 3555around the location of the golf ball. As a result of the two separatetouch inputs, the application overlays a zoom ring 3525 on the image3555 centered at the midpoint between the two separate touch inputs. Inaddition, as the GUI is in the left-handed mode, the applicationdisplays magnification information 3535 on the left side of the zoomring 3525. In some embodiments, the default magnification is a 2× zoom,with the magnification variable between 1× and 3×.

The third stage 4115 illustrates the GUI 3500 after the user has startedto increase the magnification of the image using the zoom tool. Asmentioned, the user can increase the magnification of the area of theimage inside the zoom tool by providing counter-clockwise rotationinput. As shown, the user has begun to rotate the two fingers in thecounter-clockwise direction, as indicated by the arrow 4125. As a resultof the counter-clockwise rotation input, the area of the image that isinside the zoom ring 3525 is displayed as further magnified.

The fourth stage 4120 illustrates the GUI 3500 after the user hasfurther increased the magnification of the image using the zoom tool. Asshown, the user has continued to rotate the two fingers in thecounter-clockwise direction, as indicated by the arrow 4130. As a resultof the rotation movement, the area of the image inside the zoom ring3525 in the fourth stage 4120 is more magnified than the image in thethird stage 3815. At this stage, the zoom tool is at the maximum 3×magnification level.

Referring back to FIG. 37, when the application receives a clockwiserotation input while at state 3720, the GUI transitions to state 3740 todecrease the magnification of the area of the image within the zoomtool. In some embodiments, a user can provide a clockwise rotation inputby putting two fingers on the zoom ring and rotating the two fingers ina clockwise direction. As with the counter-clockwise rotation, someembodiments identify the input by tracking the location of the twoinputs and measuring the angle of the line connecting the locations.After decreasing the magnification of the area of the image inside thezoom ring, the GUI returns to state 3720 so long as the user is notcontinuing to rotate her fingers.

FIG. 42 illustrates the de-magnification operation of the zoom toolthrough the GUI 3500 at four different stages 4205-4220. The GUI 3500 atthe first stage 4205 is identical to the GUI at the fourth stage 4120 ofFIG. 41. As shown, the GUI 3500 includes the zoom ring 3525 at 3×magnification and the area of the image inside the zoom ring ismagnified.

The second stage 4210 illustrates the GUI 3500 after the user hasstarted to decrease the magnification of the image using the zoom tool.As mentioned, the user can decrease the magnification of the area of theimage inside the zoom ring by providing a clockwise rotation input. Asshown, the user has begun to rotate the two fingers in the clockwisedirection, as indicated by the arrow 4225. As a result of the clockwiserotation input, the application has decreased the magnification of thearea of the image that is inside the zoom ring 3525.

The third stage 4215 illustrates the GUI 3500 after the user has furtherdecreased the magnification of the image using the zoom tool. As shown,the user has continued to rotate the two fingers in the clockwisedirection, as indicated by the arrow 4230. As a result of the rotationmovement, the area of the image inside the zoom ring 3525 in the thirdstage 4215 is less magnified than at the second stage 4210. The fourthstage 4220 illustrates the GUI 3500 after the user has lifted the twofingers off the zoom ring 3525. As shown, the area of the image insidethe zoom ring 3525 remains the same as the area of the image in thethird stage 4215 after the user has lifted off the fingers.

As with the right-handed zoom tool, the user can move the tool around todifferent areas of the image in left-handed mode. While the gestures formagnification and de-magnification are in opposite directions for theleft-handed and right-handed modes, moving the zoom ring involves thesame gesture in either mode in some embodiments. Referring back to FIG.37, when the zoom tool receives a ring movement activation event, thezoom tool transitions to the move ring state 3750. In some embodiments,a ring movement activation event involves a user pressing and holding afinger (i.e., a single touch input) on the zoom ring. During the movering state 3750, the zoom ring follows the movement of the user's input.That is, the zoom ring moves to wherever the user moves the finger. Thezoom tool stays in this state until receiving a zoom ring movementdeactivation event. In some embodiments, the user can deactivate thezoom ring movement operation by lifting the finger off the zoom ring.Upon receiving the zoom ring movement deactivation event, the zoom toolreturns to state 3720. When the zoom tool receives an input outside ofthe zoom ring (e.g., a single touch outside of the zoom ring) while atstate 3720, the zoom tool transitions back to the initial state 3710,with the GUI in left-handed mode.

IV. Display of Multiple Images

While many of the above examples show a GUI with only one image in theimage display area, some embodiments allow the user to select severalimages for display at once. In various embodiments, different processesare available to the user in order to display multiple images. The usercan select a particular image in a collection (by selecting thecorresponding thumbnail with a particular type of selection input) andthe application automatically identifies any other images in thecollection that are within a threshold similarity of the selected image.In addition, the user can select a block of images in the thumbnaildisplay area (e.g., through separate inputs on a multi-touch device) orseveral individual images by pressing and holding each thumbnail for athreshold duration. In addition, some embodiments include a settingsmenu option for selecting multiple images at once.

When multiple images are selected for display in the image display area,some embodiments use a display algorithm that maximizes usage of thedisplay while ensuring that the visual weighting is equal across all theimages. In some embodiments, the application identifies the averageaspect ratio of the images to display, then divides the image displayarea into the ideal grid for the number of images, with each rectangularregion of the grid having the average aspect ratio. The application thenfits each of the images into one of the grid rectangles.

A. Identification and Display of Similar Images

As mentioned, one of the methods for selecting multiple images fordisplay in the image display area is to select an image and cause theapplication to identify any images in the same collection that arewithin a threshold similarity of the selected image. In someembodiments, when a user double taps (or double clicks) on a thumbnail,the application automatically compares other images in the collection tothe selected image. To perform a comparison between two images, someembodiments use a set of histograms for each of the images, anddetermine whether the image histograms are within the thresholdsimilarity. Some embodiments use color, texture, and gradienthistograms, though other embodiments may use other pixel properties tocompare the images. In order to focus the comparison on the moreimportant portions of the image (e.g., the center), some embodimentsdivide the image into several regions and compare the histograms forcorresponding regions. The regions may be overlapping such that somepixels (e.g., those in the center of the image) are used for moreregions than other pixels.

FIG. 43 conceptually illustrates a process 4300 of some embodiments foridentifying and displaying similar images within a collection. The imageviewing, editing, and organization application of some embodimentsperforms this process in response to a user command to display thesimilar images while the application is in viewing mode. The process4300 will be described in part by reference to FIGS. 44-46. FIG. 44illustrates a GUI 4400 for an image viewing application over threestages 4410-4430 in which a user selects a particular image and theapplication identifies the set of images within a collection that aresimilar to the selected image.

The GUI 4400 includes a thumbnail display area 4405 and an image displayarea 4415. These display areas are similar to those described above forFIG. 14. As indicated in the bar above the image display area 4415, thethumbnail display area 4405 displays a set of thumbnails for images inthe collection “Album 1”.

As shown, the process 4300 begins by receiving (at 4305) a selection ofa particular image within an album and a command to identify similarimages. As mentioned, some embodiments automatically perform thisprocess when a user double taps (i.e., two rapid successive taps withina threshold duration over the same thumbnail) or double clicks on athumbnail of an image. However, this feature could also be accessedthrough other GUI interactions, such as selecting a menu option or aseparate GUI item with an image selected, typing a set of keystrokes,etc.

The first stage 4410 of FIG. 44 illustrates that none of the thumbnailsin the thumbnail display area 4405 are presently selected. In the secondstage 4420, the user double taps the thumbnail 4425 with a singlefinger. This image shows a golfer having just hit a golf ball. As can beseen in the thumbnail display area 4405, the collection includes fourother images of this golf scene, as well as various unrelated images.

Next, the process 4300 outputs (at 4310) a sound effect associated withthe image comparison operation. One of ordinary skill in the art willrecognize that various different embodiments may use different soundeffects, and some may not output a sound effect at all. In someembodiments, the sound effect used may be designed to simulate a personshuffling through a large set of physical photographs, or be evocativeof a processor performing computations. While the output of the soundeffect is conceptually shown in the process 4300 as performed prior tothe comparison operations, in many cases the processor on the devicethat runs the application will perform the computations necessary forthe comparison during the time that the device outputs the sound effect.

The process then retrieves (at 4315) statistics for the selected image.In some embodiments, the statistics comprise a set of histograms thatprovide information about the image. The histograms, in someembodiments, provide information about the distribution of color in theimage, the variability of the color within the image, and the shapespresent in the image. As described in further detail below by referenceto FIG. 47, the application of some embodiments places each pixel into acolor range, a texture range, and a gradient range. The color identifiesthe location of the pixel in a particular color space, the textureidentifies how similar or different a pixel's color data is to that ofits neighbors, and the gradient identifies a direction and amount of thepixel's change in intensity relative to its neighbors. In addition tothese (and other) histograms, some embodiments also use otherinformation to compare images, such as filenames, user-entereddescriptions, Exif data, etc.

In some embodiments, the application divides up the images into severalregions and compares histograms for corresponding portions of twoimages. Different embodiments divide the images differently. FIG. 45conceptually illustrates one such division of an image 4500 into ninedifferent tiles, each of which is one-fourth the size of the image. FIG.45 uses four panels 4505-4520 to illustrate the nine tiles 4525-4565.The first four tiles 4525-4540 are the four corner regions of the image4500. The next two tiles 4545 and 4550, in panel 4510, occupy thevertical center of the image, while the tiles 4555 and 4560, in panel4515, occupy the horizontal center of the image. Finally, the last panel4520 has only one tile 4565 that is centered at the actual centerpointof the image.

Using this particular set of regions gives more weight to some pixels ofthe image than others, such that these pixels are more important in thecomparison of two images. FIG. 46 indicates the 16 quadrants of pixelsthat result from this particular division of the image 4500, and whichof the tiles 4525-4565 include pixels from each quadrant. As shown, thequadrants in the four corners are only included in one of the tiles, andthus these pixels contribute to only one of the nine sets of histogramsfor the image. The eight quadrants that border only one edge of theimage are each included in two tiles, while the four center quadrantsare each included in four tiles. Thus, the center pixels will beweighted four times more heavily than the corner pixels in a comparisonwith a different image.

The application calculates the histograms (and any other statistics) inadvance, in some embodiments, rather than performing all of thecalculations when asked to identify similar images. Some embodimentsgenerate the histograms for an image when the application first importsthe image, and store the histograms for the image with the image (e.g.,as part of the additional data in the image data structure 1500 of FIG.15, described above). With three histograms each for nine tiles, someembodiments store twenty-seven different histograms for each image.

Returning to FIG. 43, the process 4300 then selects (at 4320) a newcomparison image from the currently displayed collection (of which theinitially selected image is a part). Some embodiments traverse throughthe images starting at the beginning of the ordered series stored in thecollection data structure, while other embodiments start with the nextimage after the selected image in the ordered series, select the imagesin the collection randomly, or use another algorithm.

The process then retrieves (at 4325) the statistics for the currentcomparison image. These statistics are the same statistics as wereretrieved for the user-selected image (i.e., histograms of the color,texture, and gradient of the various different regions of the image). Asstated above, some embodiments pre-compute these histograms and storethe histograms with the data structure for the image.

Next, the process 4300 compares (at 4330) the statistics of theparticular user-selected image to the statistics of the currentcomparison image. Different embodiments perform this comparisondifferently. Some embodiments compare each histogram of the selectedimage to the corresponding histogram of the current comparison image.For instance, the Tile 1 color histogram for the first image is comparedto the Tile 1 color histogram for the second image, the Tile 5 texturehistogram for the first image is compared to the Tile 5 texturehistogram for the second image, etc. As such, some embodiments performtwenty-seven different comparisons for use in determining whether twoimages qualify as similar.

For comparing histograms from different images, different embodimentsuse different techniques. Each histogram is a set of bins defined byranges of values. The bins may be one dimensional or multi-dimensional.For instance, texture is defined by a single value, and thus each bin isa range of this texture value. The gradient for a pixel is defined as avector with both an angle and a length (or, alternatively, anx-direction value and a y-direction value). Thus, each bin will containpixels that fall within a particular range of angles and a particularlength. The color value of a pixel is often a three-dimensional value ina color space (e.g., RGB space, HSL space, YCbCr space, or a differentcolor space). Thus, each bin will have a defined range in each of thethree dimensions, as described in further detail below by reference toFIGS. 48-50.

The application compares the number of pixels in each bin of the firstimage's histogram with the number of pixels in each corresponding bin ofthe second image's corresponding histogram. Some embodiments use a rootmean square function to calculate the difference between two histograms,which takes the square root of the average of the squares of thedifferences for each bin of the histogram. As a simplified example, if afirst histogram has values of [4, 2, 1, 5] and a second histogram hasvalues of [3, 2, 4, 3], then the root mean square function is:

Sqrt[{(4−3)²+(2−2)²+(1−4)²+(5−3)²}/4]=Sqrt(3.5)=1.87.

The application then compares the root mean square output to the totalnumber of pixels in the histogram (i.e., one-fourth the number of pixelsof the image) to determine a comparison score. This comparison score iscomputed for each of the histograms (i.e., twenty-seven differenthistograms in the example shown). Rather than a root mean squareanalysis, some embodiments use a simple average of the deviation betweentwo histograms, or some other algorithm that quantifies the differencebetween two histograms.

In order to compare histograms of images with different numbers ofpixels, some embodiments determine the ratio of the pixel counts andmultiply the histogram values of the smaller image by this amount. Otherembodiments only compare images with the same number of pixels andaspect ratio.

Some other embodiments divide each histogram value by the total numberof pixels in the image (or tile), thus having a histogram of fractionsthat sums to 1 over the entire histogram. In some such embodiments, theapplication uses a square root of multiplication function to comparehistograms. This function takes the square root of each bin value in afirst histogram multiplied by its corresponding bin value in the secondhistogram, then sums these square roots over the entire set of bins inthe histograms. Thus, for a first simple histogram with values of [0.1,0.4, 0.3, 0.2] and a second histogram with values of [0.35, 0.25, 0.3,0.1], the score would beSqrt(0.1*0.35)+Sqrt(0.4*0.25)+Sqrt(0.3*0.3)+Sqrt(0.2*0.1)=0.9447. Thiscomparison method gives a score of 1 if the histograms are identical,and decreases as the histograms become more and more different.

Another method employed by some embodiments uses a summation ofoverlapped significant bins. This process only counts bins for which thevalues in both histograms are greater than a particular threshold value.The threshold might be a particular percentage of the total pixels usedto generate the histogram, or a function of the number of bins (e.g.,5/N, where N is the number of bins). When the value of a bin for boththe first and second histogram is greater than the threshold, thesevalues are added to the total score for the histogram comparison. Inthis comparison, the scores can range from 0 (if there are nooverlapping significant bins) to 2 (if all pixels are in overlappingsignificant bins). This comparison technique prevents differences in thesmall (and therefore less meaningful) histogram bins from obfuscatingthe comparison process.

With the statistics for the two images compared, the process 4300determines (at 4335) whether the images are within a thresholdsimilarity. In some embodiments, the application averages the comparisonscores for each of the histograms and determines whether the averagescore falls within a threshold. This ensures that smaller differences(e.g., the presence vs. absence of an item in the corner of the image)do not prevent two otherwise similar images from being identified assuch.

Other embodiments perform a first average over the color histogramdifferences, a second average over the texture histogram differences,and a third average over the gradient histogram differences. Some suchembodiments require all three average comparison scores to fall withinthe threshold, while others only require two of the three average scoresto meet the threshold. In yet other embodiments, the applicationcompares each of the histogram comparison scores to a threshold, andrequires a particular number of the scores (e.g., all of them, eighteenof the twenty-seven, etc.) to meet the threshold in order for the twoimages to be considered similar.

In some embodiments, the application uses different thresholdsimilarities for the color, gradient, and texture histograms. Forinstance, the application might allow greater variability in the colorhistograms than the gradient histograms, as doing so would allow fordifferent exposure images or cloudy vs. sunny images to be consideredsimilar when they have the same shape.

The similarity thresholds, in some embodiments, are based on amachine-learning decision tree technique. This technique uses sampleimage pairs that have been previously classified as either similar ornot similar, and calculates different comparison scores for the images(e.g., using one or more of the comparison techniques described above).These scores are then analyzed for the similar and non-similar pairs inorder to identify useful threshold values or combinations of thresholdsfor the comparison scores.

When the images are within the threshold similarity, the process adds(at 4340) the current comparison image to the group of images classifiedas similar to the particular image. That is, the current comparisonimage becomes one of the selected images that will be displayed in theimage display area along with the user-selected image and any othersimilar images.

The process 4300 next determines (at 4345) whether the currentcollection contains any additional images that the process has not yetcompared to the particular user-selected image. As mentioned, theapplication traverses through the entire collection, even if thecollection includes all of the images imported by the application. Whenadditional images remain, the process returns to 4320 to set the nextimage as the current comparison image.

Once all images in the current collection have been compared to theuser-selected image, the process displays (at 4350) the particular userselected image and its similar images in the image display area.Returning to FIG. 44, the third stage 4430 shows the result of the userselecting the thumbnail 4425 with a double-tap input. In this stage, theapplication displays four images 4435-4450 in the image display area.These are four of the five images that show the golfer. The fifth image,thumbnail 4455 is dissimilar enough to not be considered similar (e.g.,because the different location of the golf club causes enough of agradient difference or because the darkness of the image causes enoughof a color difference). The thumbnails for the images 4435-4450 now havea highlighted border in order to indicate that these images are selectedfor viewing. Some embodiments display the images in the image displayarea 4415 according to an algorithm that maintains an equal visualweighting across all of the images (although that is not an issue inthis case because the aspect ratio is equal for the images).

The process 4300 of FIG. 43 describes how the application performs acomparison between multiple images by comparing various histograms forthe image. FIG. 47 conceptually illustrates a process 4700 forgenerating a set of histograms according to some embodiments of theinvention. As stated, some embodiments pre-compute the histograms (e.g.,generate the histograms at the time of import of the image, and savethem with the image), and thus perform the process 4700 or a similarprocess for each image when the image is imported into the application.The process 4700 will be described in part by reference to FIGS. 48-50,which conceptually illustrate a color space commonly used by theapplication to generate a set of color histograms for an image.

As shown, the process 4700 begins (at 4705) by receiving an image.Typical images comprise a set of pixels arranged in a rectangle. Eachpixel is generally defined by (i) a set of color values in a particularcolor space and (ii) a location in the rectangle. The image may be in anencoded form, in which case the application decodes the image in orderto identify the color values for the pixels of the image.

The process calculates (at 4710) the dimensions within the image of thedifferent tiles for which it will generate histograms. As describedabove by reference to FIGS. 45 and 46, some embodiments generate threehistograms for each of nine different tiles. The process determines thepixel dimensions of each of the tiles. For instance, if an image haspixel dimensions of 640×480 (i.e., 640 pixels in the horizontaldirection and 480 pixels in the vertical direction), the Tile 1 4525will use the rectangle of pixels with corners at (1, 1) (the left cornerof the image) and (320, 240) (the center of the image), while Tile 94565 will use the rectangle from pixel location (161, 121) to (480,360).

The process then selects (at 4715) the next pixel of the image. Someembodiments traverse each row of pixels, starting at pixel (1, 1) in thetop left corner, traversing along top row first, and then down to thenext row, etc. Other embodiments select pixels in a different manner(e.g., randomly, column first, etc.).

Next, the process 4700 identifies (4720) all tiles of the image to whichthe selected pixel belongs. Using the tiling scheme shown in FIGS. 45and 46, pixels located towards the corners will only belong to oneregion of the image, while pixels located in the center will belong tofour regions. Using this scheme, pixels in quadrants near only one edgebelong to two regions.

The process next begins generating the histograms. In this exampleprocess 4700, the application generates the color value first, then thetexture value, and finally the gradient value. However, one of ordinaryskill in the art will recognize that different embodiments will performthese computations in a different order, or perform them in parallel.

The process converts (at 4725) the pixel values to hue-saturation-value(HSV) color space. The stored pixel values are often in adevice-specific RGB color space, and conversion to HSV entails only asimple transformation. FIG. 48 conceptually illustrates the HSV colorspace 4800, which is a cylindrical coordinate system designed to be moreintuitive and perceptually relevant than the Cartesian RGB coordinatesystem. As shown, in the color space 4800, hue is represented by theangular dimension, with the red primary commonly situated at angle 0,the green primary at 120°, and the blue primary at 240°. The radialdimension represents saturation, ranging from zero saturation(achromatic) at the center to fully saturated (pure colors) at theoutside edge. The vertical axis represents lightness, ranging in thecenter from black (at lightness=0) to white (at lightness=1).

The HSV color space is only one possible color space that could be usedto generate the color histogram. Some embodiments use a different colorspace, such as the HSL (hue-saturation-lightness) color space, YCbCr(luminance-chroma) color space, or other developer-defined color spaces.Other embodiments do not perform a color conversion, and just use thedevice's gamma-corrected RGB space in which the pixels are alreadydefined.

With the pixel values converted, the process 4700 then identifies (at4730) the region of HSV color space to which the currently selectedpixel belongs. Each region is a three-dimensional region in the colorspace. However, in some embodiments, the regions have different sizes inthe color space so that each region covers a similar volume ofhuman-differentiable color space. That is, in areas of the color spacewhere the human eye has trouble differentiating between different colorvalues, the regions are larger as compared to areas of the color spacewhere the human eye easily differentiates between different colorvalues.

For instance, two regions might have different hue ranges, differentsaturation ranges, and/or different value ranges. FIG. 49 illustrates acircular cross section 4900 of the HSV color space (i.e., at a constantvalue), with two regions defined. The first region 4905 is in the redportion of the hue dimension, while the second region 4910 is in theblue portion of the hue dimension. In general, the human eye can moreeasily differentiate between shades of blue than shades of red, so someembodiments use regions with smaller hue ranges in the blue portion ofcolor space than in the red portion of the color space, as shown in thisexample.

FIG. 50 illustrates a three-dimensional portion 5000 of the HSV colorspace divided into two regions 5005 and 5010. In this case, thesaturation and hue of the two regions are equal, but the value range isdifferent. One of ordinary skill in the art will recognize that theseregions are merely examples, and that the regions may have any arbitraryshape in the color space. While not shown in either FIG. 49 or FIG. 50,within a particular hue and value, multiple regions could be defined fordifferent saturation ranges. Furthermore, the regions need not be ofconstant ranges in all dimensions. For instance, a particular regionmight have a first hue range at its outer saturation and a second,different hue range at its innermost saturation, so long as the regionsaccount for the entirety of the color space.

Returning to FIG. 47, the process 4700 calculates (at 4735) a texturevalue for the currently selected pixel by comparing the pixel toneighboring pixels within the image. Some embodiments use a texturecalculation that compares a pixel's brightness values to those of thesurrounding pixels to determine a single texture value for the pixel. Todetermine the pixel brightness, some embodiments perform a calculationon the RGB pixel values. Other embodiments compare a different propertyof the pixel (other than brightness) to that of the neighboring pixel.

The novel texture calculation algorithm used by some embodiments isdescribed by reference to FIG. 51. This figure illustrates nine pixelsused by some embodiments to calculate the texture for the center pixel(P0). Initially, some embodiments calculate an intensity value (similarto a brightness, luminance, or value) for each pixel. This isessentially a weighted average of the RGB values, which may give moreweight to one or the other color channel values. For instance, someembodiments place more weight on the red color channel.

The pixels in FIG. 51 have intensity values of I₀ (for pixel P0) throughI₈ (for pixel P8). The texture calculation of some embodiments uses aset of condition checks to determine a texture value. One of ordinaryskill will recognize that the texture values do not correspond to aphysical quantity, but rather are simply different bins. The texturecalculation of some embodiments is as follows:

-   -   if P0 has the largest intensity in the window, assign a texture        of 0 to P0;    -   if P0 has the smallest intensity in the window, assign a texture        of 1 to P0;    -   if P0 does not have either the smallest or largest intensity,        but I₀, I₁, . . . I₈ are all within a threshold of each other        (i.e., they all have same or similar intensities), assign a        texture of 2 to P0.    -   If none of these three conditions are satisfied, the application        computes the following differences:

(I_(I)+I₂+I₃)−(I₆+I₇+I₈);

(I₃+I₅+I₈)−(I₁+I₄+I₆);

(I₁−I₂−I₄)−(I₅+I₇+I₈);

(I₂+I₃+I₅)−(I₄+I₆+I₇).

The application then determines which of these differences has thegreatest absolute value, as this is indicative of the direction ofgreatest intensity change within the window around the pixel P0. Thefirst difference corresponds to vertical change in intensity, the seconddifference to horizontal change in intensity, the third difference tochange from top right to bottom left, and the fourth difference tochange from bottom right to top left.

If the first inequality is the largest, the application assigns one ofthe following two texture values:

-   -   if (I₁+I₂+I₃)>(I₆+I₇+I₈), assign a texture of 3 to P0;    -   if (I₁+I₂+I₃)<=(I₆+I₇+I₈), assign a texture of 4 to P0. If the        second inequality is the largest, the application assigns one of        the following two texture values:    -   if (I₃+I₅+I₈)>(I₁+I₁+I₆), assign a texture of 5 to P0;    -   if (I₃+I₅+I₈)<=(I₁+I₄+I₆), assign a texture of 6 to P0.

If the third inequality is the largest, the application assigns one ofthe following two texture values:

-   -   if (I₁+I₂+I₁)>(I₅+I₇+I₈), assign a texture of 7 to P0;    -   if (I₁+I₂+I₁)<=(I₅+I₇+I₈), assign a texture of 8 to P0.

Finally, if the fourth inequality is the largest, the applicationassigns one of the following two texture values:

-   -   if (I₂+I₃+I₅)>(I₄+I₆+I₇), assign a texture of 9 to P0;    -   if (I₂+I₃+I₅)<=(I₃+I₆+I₇), assign a texture of 10 to P0.

Thus, the application assigns each pixel to one of the eleven differenttexture bins, based on the inequality. One of ordinary skill willrecognize that while this example shows a 3×3 pixel window, someembodiments will use a 5×5 window, with each inequality having ten pixelintensities on either side rather than three.

With the texture for the selected pixel calculated, the process 4700then identifies (at 4740) the texture range to which the pixel belongs.As texture is a one-dimensional value, each bin of the texture histogramrepresents a particular range along that one dimension. As with thecolor histogram, the different texture ranges may not necessarily be ofequal length.

The process 4700 also calculates (at 4745) the gradient value byidentifying the direction of greatest change in the neighboring pixels.Some embodiments use a gradient calculation that identifies thedirection and amount of change in a pixel's intensity both horizontallyand vertically. For instance, some embodiments use a gradient thatmeasures only the relative intensity change (i.e., the vertical changecompared to the horizontal change). Some embodiments use the formulathat the gradient Θ=a tan 2 (δI/δy, δI/δx), where I is again theintensity (the same values used for the texture calculation givenabove).

Referring again to FIG. 51, the gradient for P0 is Θ=a tan 2 (I₂−I₇,I₄−I₅). The a tan 2 function is a function that gives, for any realarguments (y, x) that are not both equal to zero, the angle in radiansbetween the positive x-axis of the Cartesian plane and the point givenby the coordinates (x, y) on the plane. Thus, the gradient of someembodiments is an angle that relates to the relative difference betweenthe vertical intensity change and the horizontal intensity change.

With the gradient calculated, the process then identifies (at 3850) thegradient range to which the pixel belongs. The gradient given above is aone-dimensional value (i.e., just an angle). In some embodiments, thegradient is a two-dimensional value (represented, e.g., as an x-y vectoror an angle and length). Thus, each bin of the gradient histogramrepresents a particular range of x and y gradient values. As with thecolor histogram, different gradient ranges may not necessarily be ofequal size in the Cartesian x-y space.

With the ranges identified for the three different properties of thepixel, the process adds (at 4755) the pixel to the color, texture, andshape (gradient) histograms for each tile of the image to which thepixel belongs, as determined at operation 4720. As indicated, for thetiling scheme shown in the above figures, this may be three differenthistograms, six different histograms, or twelve different histograms,depending on the location of the pixel.

Having analyzed the currently selected pixel, the process 4700determines (at 4760) whether any additional pixels in the image remainunanalyzed. When additional pixels remain, the process 4700 returns tooperation 4715 to select the next pixel. Once all of the pixels havebeen analyzed, the process ends.

FIG. 52 conceptually illustrates the software architecture of portionsof the image viewing, editing, and organization application of someembodiments that generate histograms and compare images for similarity.FIG. 52 illustrates a histogram generation module 5200, a similaritycomparator 5250, and an image selector 5275. In addition, this figureillustrates image data 5280 (i.e., the image data structures and imagefiles stored by the application) and collection data 5285 (i.e., thecollection data structures stored by the application).

The histogram generation module 5200 receives an image (e.g., an imagethat the image viewing application is importing) and generates color,texture, and shape histograms for various regions of the image, thenstores these histograms with the image. The histogram generation module5200 includes an image tiler 5205, an HSV converter 5210, an intensitycalculator 5215, a texture calculator 5220, a gradient calculator 5225,and a histogram generator 5230.

As shown, the image tiler 5205, the HSV converter 5210, and theintensity calculator 5215 receive image data. The image tiler 5205receives an image, identifies the dimensions of the image, andcalculates the coordinates in the image (i.e., the pixel coordinates)for the different regions for which the histogram generation module 5200will generate histograms. The image tiler 5205 passes these tilecoordinates to the histogram generator 5220.

The HSV converter 5210 receives the pixel data for an image and convertseach pixel into the HSV color space (e.g., from RGB space). One ofordinary skill will recognize that different embodiments may usedifferent versions of the RGB to HSV conversion, or may use a differentcolor space entirely. The HSV converter passes this color space data foreach pixel of the image to the histogram generator 5220.

The intensity calculator 5215 also receives pixel data for the image andcalculates the intensity value for each pixel. As with the HSVconverter, different embodiments may use different calculations toderive the intensity from the RGB pixel values. The intensity calculator5215 provides this intensity data to the texture calculator 5220 and thegradient calculator 5225.

The texture calculator 5220 calculates a texture value for each pixel(e.g., using the texture algorithm described above, or a differentprocess) and provides these values to the histogram generator 5220. Thegradient calculator 5225 calculates a gradient value for each pixel(e.g., using the gradient algorithm described above, or a differentprocess) and provides the gradient values to the histogram generator5220.

The histogram generator 5220 uses the color data, texture values, andgradient values to generate histograms for each of the tiles receivedfrom the image tiler 5205. The histogram generator 5220 receives, e.g.,a texture value for each pixel. For a particular pixel, the histogramgenerator identifies, based on the pixel coordinates, to which (possiblymore than one) of the tiles the pixel belongs. The generator then addsthe texture value to the appropriate bin of the histogram for the one ormore tiles. The histogram generator 5220 stores these histograms in theimage data 5280 for the image.

The similarity comparator 5250 identifies images similar to a particularuser-selected image. As shown, the similarity comparator 5250 includes acomparison score generator 5255 and a threshold checker 5260. When auser requests similar images for a particular image, the similaritycomparator 5250 receives a list of images from the collection data 5285(e.g., a list of the images in a particular collection). The similaritycomparator 5250 retrieves the histograms for the images and calculatesone or more comparison scores for each pair of images.

The threshold checker 5260 receives the comparison scores and determineswhether each pair of images qualifies as similar. The threshold checker,as described above, may perform various different checks on thedifferent scores (in some embodiments, there are 27 different comparisonscores). The threshold checker 5260 outputs the list of similar imagesto the image selector 5275, which manages the selection of theparticular images for the GUI.

B. User Selections of Multiple Images

As mentioned, some embodiments provide various other methods forselecting multiple images in order to simultaneously view the selectedimages. For example, the application may operate on a multi-touchcapable device (i.e., a device capable of recognizing multiple differentpoints of contact with a touchscreen, touchpad, etc.) and translatemulti-touch input over the thumbnail display area into a block selectionof thumbnails. Furthermore, some embodiments allow users to press andhold thumbnails in order to add the thumbnail to a set of selectedimages.

FIG. 53 conceptually illustrates a process 5300 of some embodiments forselecting a block of thumbnails within the image display area. In someembodiments, the application receives a multi-touch selection in orderto select this block. FIG. 53 will be described by reference to FIGS. 54and 55, which illustrate examples of the selection of such blocks ofthumbnails. Both of these figures illustrate three stages of a GUI 5400,which includes a thumbnail display area 5405 and an image display area5415, similar to the corresponding display areas in the GUIs describedabove. The first stage 5410 of FIG. 54 and the first stage 5510 of FIG.55 both illustrate the GUI 5400 with no images selected.

As shown, the process 5300 begins by receiving (at 5305) two separateand at least partly coincidental selections within the thumbnail displayarea. The application may receive these selections from the touchscreenof a device capable of translating multi-touch inputs. For instance, auser might use two fingers to press down on two separate thumbnails inthe thumbnail display area. Because users are unlikely to make aninitial contact with a touchscreen at the exact same time with twofingers, some embodiments only require that the inputs be partiallycoincidental.

The process then identifies (at 5310) a first thumbnail in the thumbnaildisplay area associated with the first touch selection and (at 5315) asecond thumbnail associated with the second touch selection. Someembodiments associate each thumbnail with a particular two-dimensionalarray of screen pixels, which changes as the thumbnails scroll throughthe display area. When a user touches the screen over the thumbnailgrid, this touch input is translated into a set of pixel values (e.g., acircle of a particular radius, a square with a particular side length,etc.). The application then compares these pixel values to those of thethumbnails in order to determine which thumbnail the user is selecting.Some embodiments identify the thumbnail that corresponds to the greatestportion of the touch input pixels.

The second stage 5420 of FIG. 54 illustrates a user tapping a firstthumbnail 5425 with her index finger and a second thumbnail 5435 withher thumb. Assuming that the top left thumbnail represents the firstimage in the collection, these are the third and eighth thumbnails inthe ordered collection of images. In the second stage 5520 of FIG. 55,the user taps a first thumbnail 5505 (the fourth thumbnail in theordered collection) and the same second thumbnail 5435.

With the boundary thumbnails for the selection identified, the process5300 determines (at 5320) whether the first thumbnail is before thesecond thumbnail in the display area. The order may be determined froman order value in the collection data structure (e.g., an array index ofthe reference to the image data structure that stores the thumbnail) orrelative order may be derived from the screen pixels to which thethumbnails are displayed.

Some embodiments use the first input received as the first thumbnail andthe second input received as the second thumbnail. However, in order todefine the selection properly, the application needs the first thumbnailto come before the second thumbnail in order. As such, when the firstthumbnail is after the second thumbnail, the process switches (at 5325)the first and second thumbnails so that the first thumbnail comes firstin the order.

Next, the process selects (at 5330) all images with thumbnails in thegrid from the first thumbnail to the second thumbnail. For instance, inFIG. 54, thumbnails three and eight are the first and second thumbnails.As such, all of thumbnails three through eight will be selected by thisuser action. Similarly, in FIG. 55, thumbnails four through eight willbe selected.

The process then displays (at 5335) a selection indicator on theselected thumbnails. Some embodiments use two different forms ofselection indicator to indicate whether a selected thumbnail correspondsto a secondary selected image (i.e., one of several selected images) ora primary selected image (i.e., an active image that is the only imageshown in the image display area).

Accordingly, the process 5300 also displays (at 5340) the selectedimages in the image display area. When multiple images are selected inblock form with process 5300, some embodiments always display all of theimages in the image display area. In some embodiments, the applicationdisplays all of the images using a same visual weighting by using anapproximately equal number of pixels for each of the images. The processof some embodiments for identifying the ideal display will be describedbelow in subsection C of this section.

The third stages 5430 of FIGS. 54 and 5530 of FIG. 55 illustrate theresulting display of the respective multi-touch block selections. Instage 5430, all six thumbnails from thumbnail 5425 to thumbnail 5435 aredisplayed with a thin highlight. In addition, the application displaysthe six images in the image display area with equal size. Stage 5530illustrates the same result with one fewer thumbnail selected. Becausethe application only displays five images in the image display area5415, two of the images are displayed centered along the bottom row, buthave the same size as the other images displayed along the top row. Asis apparent from these two images, some embodiments display the imagesin the image display area in the order that the thumbnails are shown inthe thumbnail display area (which, in turn, is the order the images arestored in the collection data structure).

In addition to the multi-touch block selection, some embodiments allowusers to press and hold a thumbnail in order to select the thumbnail asone of a group of selected images. When the user merely taps athumbnail, that causes the selection of the corresponding image to bethe sole selected image. On the other hand, when the user holds down theinput (e.g., presses down on the touchscreen for a threshold duration),the application maintains selection of any previously-selected imagesand adds the thumbnail to the set of selected images.

FIG. 56 conceptually illustrates a process 5600 of some embodiments fortranslating user input over an unselected thumbnail into a selection ofthe thumbnail. Users may also tap or press and hold an already-selectedthumbnail (which may be the primary selection or a secondary selection),and these inputs are described below by reference to FIG. 66. Inaddition, while this process is described as responding to touchscreeninput, one of ordinary skill in the art will recognize that someembodiments implement a similar process for non-touchscreen input (e.g.,with mouse clicks instead of taps and the press and hold of a mousebutton instead of pressing and holding on a touchscreen). FIG. 56 willbe described by reference to FIG. 57, which illustrates variousselection inputs in the GUI 5400 over six stages 5710-5760.

As shown, the process 5600 begins by receiving (at 5605) a single touchinput within the thumbnail display area over an unselected thumbnail. Insome embodiments the application has a single process for resolving allinput over the thumbnail display area. In other embodiments, theapplication receives the multi-touch information from the touchscreendevice in a form that gives an input type (e.g., tap, hold, swipe, etc.)and a screen location. The application then resolves this event (inputand location) into an action to take (e.g., select item, slide displayarea, perform edit, etc.) based on its current state. However, thisconceptual process deals only with the receipt of a single touch input(i.e., either a tap or a hold) over an unselected thumbnail in thethumbnail display area.

The process then identifies (at 5610) an unselected thumbnail associatedwith the touch input. As described above by reference to FIG. 53, someembodiments associate each thumbnail with a particular two-dimensionalarray of screen pixels, which changes as the thumbnails scroll throughthe display area. When a user touches the screen over the thumbnailgrid, this touch input is translated into a set of pixel values (e.g., acircle of a particular radius, a square with a particular side length,etc.). The application then compares these pixel values to those of thethumbnails in order to determine which thumbnail the user is selecting.Some embodiments identify the thumbnail that corresponds to the greatestportion of the touch input pixels.

The process then determines (at 5615) whether the input has been removedfrom the touchscreen. In this conceptual process, the application isleft to make the determination between a tap and a hold, while thetouchscreen device provides the application with the basic data that aparticular portion of the touchscreen is receiving a touch input. Asmentioned, in some embodiments, the difference between a tap and a holdis made at the device level (e.g., by a framework within the operatingsystem of the device), and the application would actually have severaldifferent event-driven processes for dealing with these differentinputs.

When the input has not yet been removed from the touchscreen, theprocess determines (at 5620) whether the input has been present for athreshold duration. This duration is the length of time that a user hasto maintain contact with the touchscreen in order for the input toqualify as a press and hold rather than a tap. When the thresholdduration for a hold has not yet been reached, the application returns to5615. In essence, these two operations form a determination between atap (if the process determines that the user has removed the input fromthe touchscreen before the threshold duration is reached) and a hold (ifthe duration is reached with the input still present). As stated, someembodiments receive this determination from a framework of the device onwhich the application operates.

When the input is removed from the touchscreen before the thresholdduration, the process selects (at 5625) the identified thumbnail andremoves (at 5630) the selection of any other thumbnails. That is, theapplication makes the identified thumbnail the only selected thumbnail.The process then displays (at 5635) the image associated with thethumbnail as the sole image in the image display area. The process thenends.

The first stage 5710 of FIG. 57 illustrates the GUI 5400 with a firstimage displayed in the image display area 5415 and its correspondingthumbnail 5705 highlighted as the primary selection. As shown, at thisstage the user selects a thumbnail 5715 with a tap input. The secondstage 5720 illustrates that the result of this tap selection is that theapplication now highlights the thumbnail 5715 as the primary selection,with the thumbnail 5705 no longer highlighted. In addition, the image5717 corresponding to thumbnail 5715 is displayed in the image displayarea 5415, as this is the only selected image.

Returning to FIG. 56, when the input is present over the thumbnail forthe threshold duration, the application selects (at 5640) the identifiedthumbnail. The application then displays (at 5645) the image associatedwith the thumbnail along with any other selected images. That is, one ormore images might have already been selected, and the applicationdisplays all of these images in the image display area. The process thenends.

The second stage 5720 shows a user selecting a thumbnail 5725 with apress and hold selection (indicated by the small clock icon, which isshown conceptually and is not part of the GUI). As a result, in thethird stage 5730 the application displays both the image 5717 and theimage 5727 (which corresponds to the thumbnail 5725). Furthermore, boththe thumbnail 5715 and the thumbnail 5725 are highlighted as selected.However, the application uses a lighter selection indication highlight,in order to indicate that both of these thumbnails are secondaryselections and that there is no primary selection at this time. The twoimages 5717 and 5727 are displayed in such a way as to maintain theaspect ratio (i.e., without distorting or cropping the image) andmaximize the image size, as will be explained below in subsection C.

The third stage 5730 also illustrates that the user again performs apress and hold selection, this time over the thumbnail 5735. In stage5740, the application adds the image 5737 to the image display area,rearranging the other images in the display area as needed. Furthermore,the thumbnail 5735 is now highlighted with a secondary selectionhighlight, the same as the other two thumbnails.

In addition, the user performs a multi-touch block selection at thisstage, tapping thumbnails 5745 and 5755. As shown in stage 5750, thiscauses the selection of the thumbnail 5765 in addition to the two tappedthumbnails. As a result, in stage 5750, six thumbnails are nowhighlighted with the lighter selection indication, and the correspondingsix images are displayed in the image display area. The application hasreduced the size of these images as compared to the previous stages inorder to fit six images into the display area with the same visualweighting.

At stage 5750, the user taps an unselected thumbnail 5775. Stage 5760illustrates the result of this selection, with the image 5777 displayedon its own in the image display area. The selection of the other sixthumbnails is removed, and the application displays a thicker selectionindication highlight on the thumbnail 5775.

FIG. 58 illustrates a similar set of selection operations in the mobilephone and media player GUI 1700 of some embodiments. The first stage5810 illustrates the user making a tap selection of a thumbnail 5805,resulting in the display of the corresponding image in the display area1715. The second stage 5820 illustrates a press and hold selection ofthe thumbnail 5815, so that the corresponding image is then added to theimage display area. Next, the user makes a simultaneous tap selection ofthe thumbnails 5825 and 5835, so that the images corresponding to thesethumbnails as well as the thumbnail 5845 in between them are all addedto the image display area.

C. Displaying Multiple Images

The above subsections described different actions available in someembodiments in order to select multiple images for simultaneous displayin the image display area. As described briefly, when displayingmultiple images within the image display area, some embodiments maintainthe aspect ratio of each of the images while also giving each image thesame visual weight (e.g., number of screen pixels).

FIG. 59 conceptually illustrates a process 5900 of some embodiments fordisplaying multiple images simultaneously within an image display area.FIG. 59 will be described by reference to FIGS. 60-65, whichconceptualize the calculations performed by some embodiments in order todisplay four images that have different aspect ratios with the samevisual weighting.

As shown, the process 5900 begins by receiving (at 5905) N images todisplay in the image display area. In this case, N is a non-zeropositive integer (i.e., 1, 2, 3, etc.). When there is only a singleimage, some embodiments do not perform the process 5900, although theprocess does produce a correct result of the one image displayed at fullsize. These images may be received through any of the user interactionsdescribed in the above subsections (e.g., a block selection, a requestto identify similar images, or other selections that result in theselection and display of multiple images), as well as any otherinteractions not described herein.

FIG. 60 illustrates a GUI 6000 with a user making a block selection offour thumbnails. The GUI 6000 includes an image display area 6005, whichis shown in the expanded view as having a 4:3 aspect ratio. In someembodiments, the image display area will vary in size (i.e., number ofpixels) and aspect ratio depending on the resolution and screen aspectratio of the display screen of the device on which the GUI is displayed,the size of the thumbnail display area, whether other GUI areas occupyportions of the display, etc.

Upon receiving the command to display the images in the image displayarea, the process calculates (at 5910) the average aspect ratio of thereceived images. This average aspect ratio is used as the aspect ratiofor a set of regions in the image display area into which the imageswill be fit. As FIG. 61 illustrates, the four selected images 6105-6120have aspect ratios of 4:3, 3:4, 16:9, and 4:3. Images 6105 and 6120 havethe same aspect ratio, but different sizes. In many cases, the imageswill all have a resolution (i.e., number of defined pixels) larger thanthe number of screen pixels available, especially when multiple imagesare displayed. Thus, each image is allocated a smaller portion of thescreen. The average aspect ratio of the images 6105-6120 is[(4/3)+(3/4)+(16/9)+(4/3)]/4=187/144, as shown by the region 6125.

The process 5900 then divides (at 5915) the image display area into anumber of rows and columns that maximizes the screen area per image forat least N images with the calculated average aspect ratio. As thedisplay regions will all have the same dimensions, the most efficientway to pack in the regions will be in grid form. Thus, if there are fiveimages, the grid of regions might be a 3×2 grid, a 2×3 grid, or if theimages are extremely elongated a 1×5 or 5×1 grid.

In order to identify the optimal solution, some embodiments test throughthe space of possible row/column combinations that can be used to holdthe N images in order to determine which combination gives the maximumpossible area per region with the average aspect ratio. Some embodimentsbegin with one column and iterate up to the number of images to display(though some embodiments put a cap on the number of columns).

For a particular number of columns, the application determines thenumber of rows needed to display all of the images. For example, forthree columns and five images, two rows will be needed, though one ofthe regions would not be used. The application then calculates the widthof a maximally sized region for the particular number of columns androws as the total width of the viewing area divided by the number ofcolumns (possibly subtracting out a constant to ensure that there willbe at least a small gap between images in the display). The applicationalso calculates the height of the maximally sized region as the totalheight of the viewing area divided by the number of rows (again,possibly subtracting out a constant). The application then determinesthe dimensions of a region having the average aspect ratio that fitswithin this maximal region. The number of columns used is that whichmaximizes the area of this region.

FIG. 62 illustrates that the ideal number of columns for the 187:144aspect ratio region 6125 within the 4:3 image display area 6005 is two,with two rows. In fact, because 187:144 is very close to 4:3, this gridnearly fills the total area.

Next, the application calculates (at 5920) the area available to each ofthe images based on the number of rows and columns. This calculation, insome embodiments, is the maximally sized region used to determine thenumber of rows and columns in operation 5915 as described in the priorparagraphs. In the example, this area is the area of the region 6125within the image display area 6005.

The application then identifies (at 5925) the image that will have thesmallest area when fit into the available area (i.e., the size of thegrid regions). This will generally be the image having an aspect ratiothat differs the most from the average aspect ratio. In someembodiments, to identify this image, the application calculates theheight and width of each image in order to maintain the image's aspectratio and fit the entire image within the grid region. For images with alarger aspect ratio than the average, the width will equal that of thegrid region while the height will be reduced from that of the gridregion. For images with a smaller aspect ratio than the average, theheight will equal that of the grid region while the width is reducedfrom that of the grid region.

FIG. 63 illustrates the different aspect ratio images within the gridregion 6125. The 4:3 image 6105 occupies 97% of the grid region (and theother 4:3 image 6120 occupies the same portion), the 16:9 image 6115occupies 73% of the grid region, and the 3:4 image 6110 occupies 58% ofthe grid region. Accordingly, the image 6110 is identified as that withthe smallest area when fit into the grid region. Accordingly, in orderfor each image to use the same number of pixels, each image will occupy58% of the grid region area.

The process then calculates (at 5930) the width and height for eachimage in order to maintain the aspect ratio and use the same area withinthe grid region as the image with the smallest area, as determined atoperation 5925. For a particular image, some embodiments calculate thewidth as square root of the product of the minimum area and the aspectratio of the image. The height of the particular image is thencalculated as the width divided by the aspect ratio.

FIG. 64 illustrates the sizes of the images 6105 (which is equivalent insize to image 6120) and 6115 when fit to occupy the same area in theimage display area as the image 6110. Both of these images are sizeddown to only occupy 58% of the region 6125. To use example numbers, ifthe region 6125 has a width of 374 pixels and a height of 288 pixels,then the size of image 6105 for display would be approximately 288pixels×216 pixels. The size of image 6115 would be approximately 333pixels×187 pixels. The size of image 6110, shown in FIG. 63, would beapproximately 216 pixels×288 pixels.

The process 5900 assigns (at 5935) each of the images to their region inthe display area. The application, in some embodiments, takes the imagesin order (e.g., their order within the thumbnail display area, which inturn is determined by their order within the collection) and assignsthem to grid regions. In addition, when some of the grid regions in thelast row are not used, the application removes these grid regions andcenters the grid regions of the bottom row.

Finally, the process displays (at 5940) the images within the imagedisplay area in the assigned regions at the assigned size. FIG. 65illustrates the images 6105-6120 displayed within the image display area6005. As can be seen, the images all appear (e.g., to a human observer)to be the same size, because they each have the same number of pixels.This gives the beneficial result that none of the images appear morepreferable in a comparison of the images simply on account of beinglarger than the other images. As a common use of the multiple imagedisplay feature is for a user to determine which of several photos ofthe same scene to keep, having images appear the same size provides asignificant benefit to the user.

V. Operations on One or More Images

The above Section IV describes various techniques available in someembodiments in order to select one or more images, includingautomatically identifying groups of similar images, block selections ofthumbnails, and pressing and holding thumbnails in order to add thecorresponding image to a group of selected images. The following sectiondescribes various operations that may be used in order to apply tags toimages, cycle through images in a selection, as well as select anddeselect individual images.

A. Selection and Deselection Operations

FIG. 66 conceptually illustrates a state diagram 6600 that describesdifferent states and transitions between these states of the GUI of someembodiments relating to the selection/deselection of images and viewingof selected images. One of ordinary skill in the art will recognize thatthe GUI of some embodiments will have many different states relating toall different types of input events, and that the state diagram 6600 isspecifically focused on a subset of these events. The state diagram 6600will be described in part by reference to FIGS. 67-71, which illustratevarious selection and deselection operations. The state diagram 6600, aswell as the accompanying figures, describe and illustrate touchinteractions for changing states of the GUI. One of ordinary skill inthe art will recognize that various other interactions, such as cursorcontroller gestures and button clicks, keyboard input, ortouchpad/trackpad input may also be used for similar selectionoperations. Within the figure, many of the transition conditions areshown as user interactions (e.g., “swipe left”). One of ordinary skillin the art will recognize that the state transitions occur in responseto the receipt of such user input by the image viewing and editingapplication.

When only one image is selected, the GUI is in state 6605, displayingthe single selected image in the image display area and displaying aprimary selection indicator on the corresponding thumbnail. As shown inthe previous section, some embodiments use a primary selection indicatoron thumbnails to indicate when only one image is displayed in the imagedisplay area, while also using a secondary selection indicator onthumbnails to indicate when the thumbnail is one of multiple selectedimages. In some embodiments, both selection indicators are highlightsaround the border of the thumbnail, with the primary selection indicatorbeing a thicker highlight than the secondary selection indicator.

With one image selected, users can select a different image by tappingon an unselected thumbnail. When a user taps an unselected thumbnail (inthis case, any other thumbnail than the one that corresponds to thedisplayed image), the application transitions to state 6607 to set thetapped thumbnail (and its corresponding image) as the new selectedimage, then transitions back to state 6605. In addition, users can cyclethrough the images with left and right swipe gestures. As shown, whenthe application receives a rightward swipe gesture, the applicationtransitions to state 6608 to set the previous image in the collection asthe new selected image. Similarly, when the application receives aleftward swipe gesture, it transitions to state 6609 to set the nextimage in the collection as the new selected image. After either suchchange, the application transitions back to 6605, with the new selectedimage displayed in the image display area. When receiving one of theseswipe gestures, some embodiments use a slide animation to show thepreviously selected image sliding off the display with the new selectedimage either sliding onto the display (from the right side if a leftwardgesture, and from the left side if a rightward gesture). Otherembodiments use other animation to illustrate the change in image, orjust replace the image in the image display area without any animationat all. FIG. 33 illustrates an example of such a swipe gesture to cyclethrough the images in a collection.

With the GUI in state 6605, the user can add one or more images to theimage display area. These may replace the currently selected image(e.g., if the user double taps on an unselected image to display allimages similar to that image), or be added alongside the currentlyselected image (e.g., if the user presses and holds down over athumbnail. When the user performs one of these actions to add one ormore images to the preview display area, the GUI transitions to state6610 and displays the multiple selected images in the image display areaand displays secondary selection indicators on the correspondingthumbnail. Numerous examples of such a transition are shown in the abovesection (e.g., FIGS. 44, 54, 55, and 57).

Once in the state 6610 (with multiple images selected and displayed), ifthe user taps an unselected thumbnail, then the GUI transitions to state6607 to set the tapped thumbnail as the only selected image and thenback to state 6605, as illustrated by stages 5750 and 5760 of FIG. 57.In addition, while in state 6610, the user can press down and hold oneof the thumbnails in the thumbnail display area. When the particularthumbnail is one of the previously selected thumbnails, the applicationtransitions to state 6615 to remove the particular thumbnail from theset of selected thumbnails. If only one thumbnail remains selected, thenthe GUI transitions to state 6605 to display only the one selectedimage. Otherwise, the GUI transitions back to state 6610 to display theselected images, which no longer include the particular thumbnail. Inaddition, if the user performs a downward swipe gesture over aparticular image in the image display area, then this will have the sameeffect of removing the particular image from the selected set. On theother hand, as shown in the previous section, when the particularthumbnail is presently unselected, then the application transitions to6617 to add the image corresponding to the thumbnail to the current setof selected images, then transitions back to 6610 with an additionalimage shown in the image display area. Stages 5730 and 5740 of FIG. 57illustrate such an operation.

In addition, from state 6610, when the user taps one of the selectedthumbnails or one of the displayed images in the image display area, theGUI transitions to state 6620. At state 6620, the application displays asingle active image in the preview area with a primary selectionindicator on its corresponding thumbnail and a secondary selectionindicator on the thumbnails corresponding to the other selected images.FIG. 67 illustrates this transition over two stages 6710 and 6720 of aGUI 6700. The GUI 6700 includes a thumbnail display area 6705 and animage display area 6715. At the first stage 6710, the GUI displays threeimages 6725-6735 in the image display area 6715, with the correspondingthumbnails 6740-6750 highlighted in the thumbnail display area 6705.

Also in the first stage 6710, the user taps the image 6730. The secondstage 6720 illustrates the result of this interaction, with the image6730 occupying the entirety of the image display area 6715. Furthermore,the thumbnail 6745 that corresponds to the image 6730 now is bordered bya heavier highlight than the thumbnails 6740 and 6750, which remainselected. Some embodiments animate this transition. For instance, insome embodiments, the application displays the image expanding from itsposition among multiple displayed images into the larger image that usesthe full image display area in at least one direction. In addition,while the second stage 6720 of FIG. 67 illustrates the image 6730occupying nearly the entire image display area, in some embodiments theapplication displays a faded, darker version of the other selectedimages behind the primary displayed image. When the primary displayedimage does not occupy portions of the image display area (e.g., becauseof differences in aspect ratio between the image and the display area),portions of the other selected images (in the faded, darker form) willbe visible within the display.

In the following discussion, the primary selected image will be referredto as the active image, while all of the images in the selection,whether the primary selection or one of the secondary selections, willbe referred to as selected. With the GUI in state 6620, the user canperform various actions to cycle through the images (e.g., if comparingvarious photos to identify the best of a set). As shown, when theapplication receives a swipe right gesture over the image display area,the GUI transitions to state 6625 to set the previous selected image inthe collection order as the new active image, before transitioning backto the state 6620 to display the new active image. Some embodimentsanimate this transition; for instance, by minimizing the previouslyactive image back into its position in the image display area (i.e., thelocation the image would occupy if all selected images were displayed atonce) while expanding the new active image into its larger display.

Other embodiments use various forms of a sliding animation. In someembodiments, the application slides this new active image onto thedisplay while sliding the previous active image off. In otherembodiments, the new active image appears to be underneath the previousactive image, so that more of the image appears as the previous imageslides off. Still other embodiments slide the new active image onto thedisplay over the old active image. In some embodiments, the choice ofhow the application displays this transition is left up to the user.

FIG. 68 illustrates a series of such rightward swipe gestures in theuser interface 6700 over five stages 6810-6850. The first stage 6810illustrates the GUI 6700 in the same state as stage 6720 of FIG. 67. Asshown, the user has begun to contact the touchscreen with one finger. Inthe next stage 6820, the user has started sweeping her finger to theright, causing the image 6730 to slide to the right off of the screenand revealing the image 6725 below. The result of this swipe gesture isshown in stage 6830, with the image 6725 now displayed in the imagedisplay area 6715. In addition, the corresponding thumbnail 6740 is nowbordered with a thick highlight, indicating the primary selection, whilethe other selected thumbnails are bordered with a thinner highlight.

In addition, at this stage, the user again contacts the touchscreen, andthe fourth stage 6840 illustrates that the user makes another swipegesture to the right. This causes the image 6725 to slide to the rightoff of the screen, revealing the image 6735 below. The result of thisswipe gesture is shown in stage 6850, with the image 6735 now displayedin the image display area 6715. In addition, the corresponding thumbnail6750 is now bordered with the thick highlighting of the primaryselection indicator, while the other selected thumbnails are borderedwith a thinner highlight.

Similar to the swipe right gesture, when the application is in state6620 and receives a swipe left gesture over the image display area, theGUI transitions to state 6630 to set the next selected image in thecollection order as the new active image, before transitioning back tothe state 6620 to display the new active image. Some embodiments animatethis transition; for instance, by minimizing the previously active imageback into its position in the image display area (i.e., the location theimage would occupy if all selected images were displayed at once) whileexpanding the new active image into its larger display.

Other embodiments use various forms of a sliding animation. In someembodiments, the application slides this new active image onto thedisplay while sliding the previous active image off. In otherembodiments, the new active image appears to be underneath the previousactive image, so that more of the image appears as the previous imageslides off. Still other embodiments slide the new active image onto thedisplay over the old active image. In some embodiments, the choice ofhow the application displays the cycling through the images is left upto the user.

FIG. 69 illustrates such a leftward swipe gesture in the GUI 6700 overthree stages 6910-6930. The first stage 6910 illustrates the GUI 6700 inthe same state as stage 6850 of FIG. 68, with the image 6735 as theactive image in the image display area and its corresponding thumbnail6750 selected with a heavy highlight. As shown, the user has begun tocontact the touchscreen with one finger. In the next stage 6920, theuser has started sweeping her finger to the left, causing the image 6735to slide to the left off of the screen and revealing the image 6725below. The result of this swipe gesture is shown in stage 6930, with theimage 6725 now displayed in the image display area 6715. In addition,the corresponding thumbnail 6740 is now bordered with a thick highlight,indicating the primary selection, while the other selected thumbnailsare bordered with a thinner highlight.

As these figures illustrate, in some embodiments the application willallow the user to cycle through a set of selected images with the sweepgestures, including swiping from the last image in the set to the firstimage in the set, rather than preventing a swipe gesture in onedirection once the user reaches the end of the set.

In addition to cycling through a set of selected images in response tousers swiping left and right, some embodiments also allow users toremove images from the set via a swipe gesture. As shown in the statediagram 6600, when the application receives a swipe down gesture whilein state 6620, the GUI transitions to state 6635 to remove the activeimage from the set of selected images and set the next image in the setof selected images as the new active image. Much like the right and leftswipe gestures, in some embodiments the application animates thetransition; e.g., by minimizing the previously active image whileexpanding the new active image into the larger display.

Other embodiments use various forms of sliding animation; In someembodiments, the application slides the new active image onto thedisplay while sliding the previous active image off the bottom of thedisplay. In other embodiments, the new active image appears to beunderneath the previous active image, so that more of the image appearsas the previous image slides off. Still other embodiments slide the newactive image onto the display over the old active image. In someembodiments, the choice of how the application displays this transitionis left up to the user.

When there were only two images in the set of selected images, a swipedown will leave only one selected image, in which case the GUItransitions back to state 6605 with the single selected image displayedin the image display area. On the other hand, when at least two imagesremain selected after removing the active image, then the GUI returns tothe state 6620 with the next image in the set as the active image. Forthe selected images, some embodiments of the application recalculatetheir size and location in the image display area and displays thefaded, darker versions of the inactive selected images in their newpositions behind the active image.

FIG. 70 illustrates such a downward swipe gesture in the user interface6700 over three stages 7010-7030. The first stage 7010 illustrates theGUI 6700 in the same state as stage 6930 of the previous figure, withthe image 6725 as the active image in the image display area and itscorresponding thumbnail 6740 selected with a heavy highlight. As shown,the user has begun to contact the touchscreen with one finger. In thenext stage 7020, the user has started sweeping her finger downwards,causing the image 6725 to slide downwards off of the screen andrevealing the image 6730 below. The result of this swipe gesture isshown in stage 7030, with the image 6730 now displayed in the imagedisplay area 6715. In addition, the corresponding thumbnail 6745 is nowbordered with a thick highlight, indicating the primary selection, whilethe thumbnail 6740 is no longer highlighted as it has been deselected.

As shown, in some embodiments, the user pressing and holding thethumbnail of the active image has the same effect of causing the GUI totransition to state 6635 to remove the active image from the set ofselected images and set the next image in the set as the active image.In addition, when the user presses and holds a selected but inactivethumbnail (i.e., the corresponding image is not the image displayed),the application transitions to 6640 to remove the corresponding imagefrom the set of selected images. As at stage 6635, the applicationeither transitions to state 6605 (if only the active image remainsselected) or back to state 6620 (if multiple images remain selected).When the application transitions back to state 6620, some embodiments ofthe application recalculate the size and location in the image displayarea of the images that remain selected and displays the faded, darkerversions of the inactive selected images in their new positions behindthe active image.

In addition, when the user presses and holds an unselected thumbnail,the application transitions to state 6617, to add the correspondingimage to the set of selected images. As shown, some embodiments alsotransition back to state 6610 when the user adds a new image to the set.On the other hand, some embodiments select the image but maintain thefull-viewer display of the active image.

As illustrated in FIG. 66, with the GUI in state 6620, when the usertaps an unselected thumbnail, the application removes the selection ofall of the other images and transitions to state 6607, to set the newlyselected image (corresponding to the tapped thumbnail) as the soleselected image. The application then transitions back to state 6605 todisplay the newly selected image in the image display area. When theuser taps the active thumbnail, this causes the GUI to transition backto state 6610 with all of the selected images displayed in the imagedisplay area, removing the active designation from the imagecorresponding to the tapped thumbnail. Finally, some embodiments allowthe user to switch the active image between different images in the setby tapping a selected thumbnail that corresponds to one of the inactiveimages. As shown, when the user taps a selected but inactive thumbnail,the application transitions to state 6645 to set the image correspondingto the tapped thumbnail as the new active image, then transitions backto state 6620.

FIG. 71 illustrates examples of a user tapping on the selectedthumbnails in the GUI 6700 over four stages 7110-7140. The first stage7110 illustrates the GUI 6700 in the same state as the first stage 6710of FIG. 67, with the three images 6725-6735 all displayed in the imagedisplay area and their corresponding thumbnails 6740-6750 selected witha lighter highlight.

Also in this stage 7110, the user taps the touchscreen over thethumbnail 6740. The second stage 7120 illustrates the result of thisinteraction, with the corresponding image 6725 now the active imageoccupying the entirety of the image display area 6715. In addition, thethumbnail 6740 that the user tapped is now displayed as bordered with aheavier highlight than the other selected thumbnails.

At this stage 7120, the user taps the touchscreen over the thumbnail6745. The third stage 7130 illustrates the result of this interaction,with the corresponding image 6730 now the active image occupying theentirety of the image display area 6715. In addition, the thumbnail 6745that the user tapped is now displayed as bordered with a heavierhighlight. These stages illustrate that whether the GUI is in state 6610or state 6620, tapping a selected but not active thumbnail will make thecorresponding image the active image.

In addition, at stage 7130, the user again taps the thumbnail 6745 ofthe active image. The result of this interaction is shown in stage 7140,with the application again displaying all three images 6725-6735 with noactive image, and therefore no primary selection indicator for any ofthe thumbnails. This pair of stages illustrates the transition fromstate 6620 to state 6610, with multiple images displayed at once.

B. Tagging Images

The above section describes various selection and deselection operationsperformed with one or more images in the image-viewing application ofsome embodiments. The state diagram 6600 included three primaryselection states 6605, 6610, and 6620. In some embodiments, the imagesto which the application applies a user-selected tag depend on which ofthese three states the GUI is in when the user selects the tag. FIG. 72conceptually illustrates a state diagram for the GUI of some embodimentsrelating to the application of a tag in these three different states.FIG. 72 will be described by reference to FIGS. 73-77, which illustratethe application of different tags to one or more images.

As shown, the state diagram illustrates the states 6605 (only one imageselected), 6610 (multiple images selected and displayed), and 6620(multiple images selected, only active image displayed), as well astransitions between these states (described above by reference to FIG.66). In addition, FIG. 72 displays the states resulting from theselection of a tag UI item in these three different states. As mentionedabove by reference to FIG. 14, some embodiments include a set of GUIitems for applying different tags to one or more images. These tags mayinclude a favorites tag (i.e., to indicate an image that the userespecially likes), a flag (i.e., to indicate an image that the userwants to review again later), and a hide tag (i.e., to remove anunwanted image from the set of images shown in the thumbnail displayarea). These tags, in some embodiments are stored with the datastructure for the tagged image, and may be used to populate specificalbums for images with that tag.

As shown in FIG. 66, when the GUI is in state 6605 and the user selectsa tag to apply to an image, the GUI transitions to state 7205 to applythe selected tag to the sole currently selected image. The GUI thentransitions back to the state 6605. In some embodiments, when the tag isa hide image tag, the GUI also removes the image from display andselects the next image in the collection to select and display. Otherembodiments do not immediately remove a hidden image from the display,instead waiting for the user to first view a different image.

When the GUI is in state 6610 and the user selects a tag to apply, theGUI transitions to state 7210 to apply the selected tag to all of thecurrently selected images. The GUI then transitions back to the state6610. Lastly, when the GUI is in state 6620 and the user selects a tagto apply, the GUI transitions to state 7220 to apply the selected tag toonly the active image rather than all of the currently selected images.The GUI then transitions back to the state 6620.

FIGS. 73-78 illustrate the application of various tags to images withinthe image viewing application of some embodiments. FIG. 73 illustratesthe application of the hide image tag over four stages 7310-7300 of aGUI 7300. The GUI 7300 includes an image display area 7305 and an imagedisplay area 7315, in addition to various sets of GUI items. These GUIitems include a flag button 7325, a favorites button 7332, and a hideimage button 7335.

In the first stage 7310, an image 7342 is displayed in the image displayarea 7315 and the corresponding thumbnail 7345 is selected. At thisstage, the user selects the hide image button 7335, causing the buttonto become highlighted. In some embodiments, the application animates theapplication of the hide tag to an image. The second stage 7320illustrates the animation used by some embodiments to indicate theapplication of the hide image tag to the image in the image displayarea. A hide image icon 7350 (an X) is shown as coming out of the image,then receding back into the image (i.e., to become a property of theimage).

The third stage 7330 illustrates that the application marks thecorresponding thumbnail 7345 of the hidden image 7342 with a hide icon7355 (an X) overlaid on the thumbnail. In addition, at this stage, theuser selects a different thumbnail 7360. The fourth stage 7340illustrates that the image corresponding to the thumbnail 7360 is nowdisplayed. In addition, the application has removed the thumbnail 7345of the hidden image from the thumbnail display area 7305 and rearrangedthe thumbnails in the display area accordingly. As shown, in someembodiments, the application waits until the user has navigated to adifferent thumbnail to remove the hidden thumbnail from the displayedset of thumbnails.

FIG. 74 illustrates the application of a flag image tag over four stages7410-7440 of a GUI 7400. The GUI 7400 includes the same features as theGUI 7300—a thumbnail display area 7405, an image display area 7415, andthe various GUI items, including the flag button 7425. In addition, theGUI includes a tag filtering button 7435, which currently indicates thatnone of the fifteen images in the currently selected collection aretagged. This button 7435, in some embodiments, is used to identify whichimages in a collection the application should present within thethumbnail display area. At the moment, three images are selected(corresponding to thumbnails 7445-7455), but only one of the selectedimages (the image 7460) is displayed in the image display area.

At the first stage 7410, the user selects the flag button 7425, causingthe button to become highlighted. In some embodiments, the applicationanimates the application of the flag images tag to an image.Furthermore, as indicated above by reference to FIG. 66, when multipleimages are selected and one of the selected images is active, theapplication applies tags to only the active image (in this case, theimage 7460).

The second and third stages 7420 and 7430 illustrate the animation usedby some embodiments to indicate the application of the flagged tag tothe image in the image display area. The flag icon 7465 is shown ascoming out of the active image, then receding back into the image (i.e.,becoming a property of the image).

In the fourth stage 7440, the application displays a small flag icon7470 over the thumbnail 7445, to indicate that this image is flagged.When displaying thumbnails in the thumbnail display area, someembodiments check the image data structure for the images in thecollection in order to determine whether the images have any tags. Ifthe flagged tag is present for the image, then the application displaysthe flag over the image's thumbnail. The flag button 7425 remainshighlighted to indicate that the currently active image is flagged. Insome embodiments, users can select the flag button when in this state inorder to unflag the active image. In addition, at this stage, the tagfiltering button 7435 now indicates that one of the fifteen images inthe collection has been flagged.

FIG. 75 illustrates the application of the flag image tag to multipleimages over four stage 7510-7540 of the GUI 7400. As shown, at the firststage 7510, a flag icon 7470 is displayed over the thumbnail 7445. Theimage display area, however, displays three selected images 7505, 7515,and 7525, and the thumbnails corresponding to these images are selected.At this stage, the user selects the flag button 7425. As indicated aboveby reference to FIG. 66, when multiple images are displayed in the imagedisplay area, the application applies tags to all of these selectedimages. In some embodiments, the application animates the application ofthe flag images tag to the images.

The second and third stages 7520 and 7530 illustrate the animation ofsome embodiments to indicate the application of the flag image tag tothe images in the image display area. The application displays multipleinstances of the flag image tag, with one instance shown coming out ofeach displayed image, then receding back into the image (i.e., becominga property of the image).

In the fourth stage 7540, the application now displays a small flag icon7570 over each of the thumbnails 7535, 7450, and 7455, to indicate thatthe images 7505, 7515, and 7525 are flagged. The flag button 7425remains highlighted to indicate that the currently displayed images areall flagged. In addition, the tag filtering button 7435 now indicatesthat four of the fifteen images in the collection have had the flag tagapplied.

FIG. 76 illustrates the use of the tag filtering button 7435 over threestages 7610-7630 of the GUI 7600. In the first stage 7610, the button7435 indicates that four of the fifteen images are flagged, and theapplication displays flag icons over the four thumbnails 7445, 7535,7450 and 7455. An unflagged image 7605 is currently displayed in theimage display area, and therefore the application does not highlight theflag button 7425. In the first stage 7610, the user taps the button7435.

As shown in the second stage 7620, this causes the display of a menu7615. This menu allows the user to select between different sets ofimages within the selected collection based on the tags applied to theimages. The options, as shown, are “All Photos” (which, in someembodiments, does not include the hidden photos), “Flagged Photos”,“Edited Photos”, “Hidden Photos”, and “All & Hidden Photos”. Theflagged, edited, and hidden photos options cause the display of onlyimages with those tags, while the all and hidden photos option makes thehidden images viewable along with the rest of the collection.

In the second stage 7620, the user selects the “Flagged Photos” option.The third stage 7630 illustrates the result of this selection, with theapplication displaying only the thumbnails 7445, 7535, 7450, and 7455for the flagged images. Essentially, the application applies a filter tothe images in the collection, with only the images that have the flaggedtag making it through the filter. The application also now displays theimage 7460, which is one of the tagged images, in the image displayarea.

FIG. 77 illustrates the application of the favorites tag to an imageover four stages 7710-7740 of the GUI 7300, which is described above byreference to FIG. 73. In this case, the image 7705 is active as one oftwo selected images. At the first stage 7710, the user selects thefavorites button 7332, causing the button to become highlighted. In someembodiments, the application animates the application of the favoritestag to an image. Furthermore, as indicated by reference to FIG. 66, whenmultiple images are selected and one of the selected images is active,(as is the case in this figure), the application applies tags to onlythe active image.

The second and third stages 7720 and 7730 illustrate the animation usedby some embodiments to indicate the application of the favorites tag tothe image in the image display area. The favorites icon 7715 is shown ascoming out of the active image, then receding back into the image (i.e.,becoming a property of the image).

In the fourth stage 7740, the favorites button 7332 remains highlightedto indicate that the active image is a favorite. As with the flaggedimage tag, users can select the favorites button when in this state inorder to remove the favorites tag from the active image. In someembodiments, the application does not display an icon over thethumbnails to indicate which images are favorites (as shown in thisfigure). However, as will be described below, the application does keepa separate collection of favorite images and adds images tagged with thefavorites tag to this collection.

In some embodiments, the application prevents an image from being taggedwith both the favorites tag and the hide image tag. When a user selectsthe favorites button for an image tagged as hidden, the applicationapplies the favorites tag while also removing the hide image tag.Similarly, when a user hides a favorite image, the application removesthe favorites tag from the image.

FIG. 78 illustrates the application of the favorites tag to multipleimages over four stages 7810-7840 of the GUI 7800. As shown, at thefirst stage 7810 the application displays the images 7805, 7815, and7825 in the image display area, with the corresponding thumbnailsselected. At this stage, the user selects the favorites button 7332. Asindicated above by reference to FIG. 66, when multiple images aredisplayed in the image display area, the application applies tags to allof these selected images. In some embodiments, the application animatesthe application of the favorites images tag to the images.

The second and third stages 7820 and 7830 illustrate the animation ofsome embodiments to indicate the application of the favorites tag to theimages in the image display area. The application displays multipleinstances of the favorites tag, with one instance shown coming out ofeach displayed image, then receding back into the image (i.e., becominga property of the image). In the fourth stage 7340, the favorites button7332 remains highlighted to indicate that the selected images are markedas favorites. As in the above figure, the thumbnail display is notaffected by the favorites tag.

As mentioned with reference to the favorites tag, some embodimentscreate separate collections for some or all of the tags that theapplication can apply to the images. In some embodiments, only afavorites collection is created, while other embodiments createcollections for favorite images, flagged images, hidden images, andedited images, or some combination thereof.

FIG. 79 conceptually illustrates a process 7900 performed by theapplication of some embodiments upon receipt of a tag to apply to animage. As shown, the process 7900 begins by receiving (at 7905) aselection of a tag to apply to one or more images. In some embodiments,the selection of a tag may occur by the user selecting one of thetagging buttons (e.g., to flag an image, hide an image, or mark theimage as a favorite) or by editing a previously unedited image.

The process then adds (at 7910) the selected tag to the data structuresfor the images. As shown above in FIG. 15, the data structure for animage stored by the application of some embodiments includes fields forany tags applied to the image. In some embodiments, to apply the tag theapplication switches the value of a variable for the particular tag from0 to 1.

The process then determines (at 7915) whether a collection of imageswith the selected tag already exists. In some embodiments, theapplication does not create empty collections, and thus, e.g., thefavorites album does not exist until at least one image has been markedas a favorite. Other embodiments, however, always store collections foreach possible tag irrespective of whether the application has at leastone image or is empty.

When the collection for the selected tag already exists, the processadds (at 7920) the newly tagged images to the previously existingcollection of images with the particular tag. In some embodiments, theimages are added to the collection at the end of the ordered series ofimages for the collection. In other embodiments, the application storesan overall order for the images (e.g. their order within the All Photoscollection, and this order is maintained within the tagged imagescollection.

On the other hand, when the collection does not yet exist for theparticular tag, the process 7900 creates (at 7925) a new collection forthe tagged images. The process then adds (at 7930) the newly taggedimages to the new collection. In some embodiments, the applicationcreates a new collection data structure for the particular tag, with aname such as “Favorites”. The application then adds references to theimage data structures for the newly tagged images to the newly createddata structure. In some embodiments, the different collections of taggedimages appear as albums.

FIG. 80 illustrates a user navigating from an album to the collection offavorite images over three stages 8010-8030 of the GUI 7300. In thefirst stage 8010, the application displays the image 7705, to which thefavorites tag has been applied, as indicated by the highlightedfavorites button 7735. Also at this stage, the user selects the backbutton 8005.

As a result, the second stage 8020 illustrates that the application nowdisplays a collection organization GUI 8000, with the albums tab 8015highlighted. The application currently stores two albums, “Album 1” andthe Favorites album. As shown, the user selects the Favorites album atthis stage. The third stage 8030 illustrates the GUI 7300 with theFavorites as the selected collection. As only four images have beenmarked as favorites, the collection only includes these four images. Insome embodiments, when a user views the favorites album, selects animage, and then selects the (highlighted) favorites button, theapplication not only removes the favorites tag from the selected image,but also removes the image from the favorites collection and no longerdisplays the image (such that the tag functions like a hide image tagfor the specific collection).

C. Viewing Image Information

In some embodiments, a user may wish to view information about one ormore images. Some embodiments provide a GUI item (or provide a keyboardshortcut, a menu option, etc.), the selection of which causes the imageviewing application to present information about the image. In someembodiments, the application stores this information in the datastructure for the image or uses information from the data structure toaccess the displayed information. When multiple images are selected anddisplayed in the image display area, some embodiments display separateinformation for each of the selected images, while other embodimentsdisplay only the information that all of the selected images have incommon.

FIG. 81 illustrates the access of such information in the GUI 7300 foran image 8105 over three stages 8110-8130 according to some embodimentsof the invention. As shown, at the first stage 8110, the applicationcurrently displays the image 8105. In the second stage 8120, the userselects the information button 8115.

The third stage 8130 illustrates the information window 8125 thatappears when the user selects the information button 8115. As shown, thewindow 8125 has three tabs: an info tab, a map tab, and a comments tab.The info tab displays information about the selected image, primarilyusing Exif data. When the image has GPS data, the user can select themap tab in order to view a map showing the location at which the imagewas captured. In some embodiments, the application uses the GPS data toaccess a database of map data and downloads a particular region of mapdata around the GPS location. This database may be either a databaselocal to the device running the application or a remote databaseaccessed through a network, such as the Internet. The comments tab, aswill be described below in Section VI, can be used to view others'comments on the image when the image has been uploaded to a social mediaor photo sharing website, as well as make additional comments on theshared image.

Within the info tab, the application of some embodiments displays thedevice with which the image was captured (Canon EOS-1Ds Mark III), thetype of image file used to store the image data (JPEG), the resolution(3072×4608) and file size (2.6 MB) of the image, the time and date theimage was captured (Mar. 4, 2012 at 12:10:17 PM), and the location atwhich the image was captured (Joshua Tree National Park). In someembodiments, the location is automatically resolved based on GPS data,while in other embodiments the user enters this data. At the bottom ofthe window 8125, the application displays camera settings information,including the aperture (f/5.6), shutter speed (1/200), focal length (180mm), exposure (0.7 EV), and film speed (ISO 200).

FIG. 82 illustrates a user accessing information for an image 8205 inthe GUI 7300 over three stages 8210-8230 according to some embodimentsof the invention. With the exception of the different image 8205 in theimage display area, the first two stages 8210 and 8220 are the same asshown above for FIG. 81. In the third stage, the information window 8125displays different values for the information, as some of it differsfrom that of image 8105. For example, the timestamp (3:15:57 PM) islater on the same day, and the file size as well as some of the camerasettings are different.

FIG. 83 illustrates the selection of the information window with both ofthe images 8105 and 8205 selected over three stages 8310-8330 of the GUI7300. Again, the first two stages of the figure are similar to those ofthe previous two figures, except that in this case the applicationdisplays both images 8105 and 8205 in the image display area. In thethird stage 8330, the information window 8125 only displays informationthat all of the selected images have in common. In this case, the imagesare both JPEG files with 14.2 MP, but have different file sizes (whichare therefore not shown). Furthermore, both of the images' GPS dataresolves to Joshua Tree National Park, and while the timestamps aredifferent, both images were captured on March 4 (at different times). Inthe image settings, the shutter speed, focal length, and film speedsettings were the same for the two images, but because the photographerhad different settings between the two images for the aperture andexposure compensation, the application does not display thisinformation.

VI. Sharing Images

As briefly mentioned in the previous section, some embodiments allow theuser to share images directly from the image editing, viewing, andorganizing application by uploading the images to a social media orphoto sharing website through the user's account on the site. When theuser requests to share the image, the application instructs the deviceon which it operates to connect to the website (e.g., through theInternet), then automatically uploads it to the user's account on thewebsite. In some embodiments, the application additionally identifieswhen other users of the website have commented on the image, anddisplays these comments to the user of the application.

Some embodiments provide the functionality for a user to add a captionto the image. When a user wants to share an image on a photo hostingwebsite, the user may wish to have a caption with the image. In someembodiments, the user can add this caption within a dialog for sharingthe image to the website, in addition to or as an alternative to usingthe caption stored for the image within the application. Within theapplication, this caption is stored in the data structure for the image,as shown in FIG. 15 above. FIG. 84 illustrates a user adding a captionto an image over six stages 8410-8460 of a GUI 8400. The GUI 8400 issimilar to the previous GUIs (e.g., GUI 3500), but also includes an addcaption button 8405 at the center of the top toolbar. In the first stage8410, the application displays a selected image 8415 in the imagedisplay area.

In the second stage 8420, the user taps the add caption button 8405 inorder to add a caption to the selected image 8415. The third stage 8430illustrates that the application overlays a touchscreen keyboard 8425over some or all of the touchscreen in order for the user to enter acaption. In some embodiments, the keyboard is provided by the operatingsystem of the device, and the application sends a request for thekeyboard to the operating system when the user provides the input to adda caption.

In addition, in some embodiments the touchscreen device can be connectedto a separate keyboard that the user may use to enter the caption.Furthermore, one of ordinary skill in the art will recognize that theimage viewing application might operate on a non-touchscreen device withwhich the user interacts using a cursor controller (or other device) inorder to select the add caption button and then a keyboard to type inthe caption.

The third and fourth stages 8430 and 8440 illustrate the GUI 8400 as theuser types in a caption “In the Front Row!” for the image 8405. As theuser types, the caption appears in the upper header area above the imagedisplay area. In the fifth stage 8450, the user selects the “return”button on the keyboard in order to complete the caption. The sixth stage8460 illustrates the GUI 8400 after the user has entered the caption.The application now displays the caption atop the image instead of theadd caption button. In addition, the application overlays the caption insmall text over the thumbnail 8435 The application will now have storedthe entered caption with the data structure for the image 8415.

As stated, whether or not an image has a caption, in some embodiments auser can use the image viewing and editing application to upload theimage to a social media or photo sharing website. FIG. 85 illustratesuser interaction with the GUI 8400 in order to share the image 8405 viathe social media site Facebook® according to some embodiments. In thefirst stage 8510, the user selects the sharing button 8505, whichprovides options for sharing selected images in a variety of manners. Asshown in the second stage 8520, the application displays a sharing menu8515 with the options to beam the image, create a journal using selectedimages, and share the image on the Internet. In some embodiments,beaming an image entails directly sharing the image with another deviceon the same local network (e.g., a Bluetooth network, a Wi-Fi network,etc.). A journal, in some embodiments, is a shareable arrangement of aset of images to which users can add text notes, graphics, and otherinformation.

In the second stage 8520, the user selects the “Share on Internet”option. The third stage 8530 illustrates that the application nowdisplays a new menu 8525 with three photo sharing website options(Twitter®, Flickr®, and Facebook®), although other embodiments mayinclude different websites to which users can share images. In thisexample, the user selects the Facebook® option in order to share theimage to their Facebook® account. At this point, the application beginsattempting to upload the image to the user's Facebook® account.

In some embodiments, the different social media/photo sharing websitesare part of the menu 8515, along with creating a journal, beaming animage, and various other sharing options. In addition, after a userselects the website with which to share the image, the application thenprovides options for the user to choose which images (i.e., the selectedimage or images, all the images in the current album, a new set ofimages from the current album, etc.) to upload to the photo sharingwebsite.

FIG. 86 conceptually illustrates a process 8600 of some embodiments forsharing an image via a social media or photo sharing website. While FIG.86 refers to a “photo sharing” site, this could be a site specificallydesigned for photo sharing, such as Flickr®, or a broader social mediawebsite such as Facebook® or Twitter®. As shown, the process 8600 beginsby receiving (at 8605) a command to upload an image to a photo sharingwebsite. The application may receive this command through the set ofuser interactions shown in FIG. 85, or through a variation thereof.

The process then determines (at 8610) whether a user account is loggedonto the selected photo sharing site from the device on which theapplication operates. Some embodiments of the application operate on adevice that includes specific applications for different social mediaand photo sharing sites through which the device automatically logs onto the website as necessary. In this case the application will not havean issue with logging onto the website. In other embodiments, the userhas to affirmatively log on (either through an site-specific applicationor through a web browser) to the sites.

When the user is not logged on, the process 8600 prompts (at 8615) theuser to sign in to the website before uploading the image, then ends.Once the user logs on, the application again begins the process 8600. Insome embodiments, the image viewing application displays an interfacethrough which the user logs on to the website, while other embodimentsrequire the user to switch to a different application (e.g., a dedicatedapplication for the site or a web browser) in order to log on.

When the user has logged on to the requested photo sharing site, theprocess determines (at 8616) whether the image has already been uploadedto the site. In some embodiments, the application checks the datastructure for the image to determine whether an image ID is alreadystored for the image for the particular photo-sharing website. Inaddition, some embodiments determine whether the image still exists onthe website, by querying the website database. Some embodiments performthis check for some websites but not others.

When the image is already shared, the process 8600 then determines (at8619) whether the user wants to share the image as a new image. The usermight want to add the image to a different album within thephoto-sharing website. In addition, the user might have edited theimage, and wants to add the edited image as a new image (e.g., to showthe image both before and after editing. When the user adds the image asa new image, the process proceeds to 8620, described below. Otherwise,the process also determines (at 8617) whether the user wants to replacethe uploaded image on the photo sharing site. For instance, the usermight have edited the image and wants to replace the shared image withthe new version. To implement operations 8619 and 8617, some embodimentsprovide a prompt to the user, that allows the user to choose whether tocancel an upload, share an image as a new image, or replace the existingversion of the image on the photo-sharing site. When the user does notwant replace the image or share a new image, the process ends withoutuploading the image.

When the user wants to replace a shared image, the process uploads (at8618) the new image through the interface of the photo sharing siteusing the existing image ID for the image to be replaced, then ends.When the image is not yet shared, then the process uploads (at 8620) theimage through the interface of the photo sharing site. In someembodiments, the image viewing and editing application uses thesite-specific application (e.g., a Facebook® application) on the deviceto perform the upload operation. In other embodiments, the applicationtransacts with the website itself. In order to upload the image, someembodiments generate a full-size image with the edit instructionsapplied (as described above, some embodiments store only the originalfull-size image along with edit instructions for generating an editedimage from the original).

After uploading the image through the interface of the photo sharingsite, the process 8600 receives (at 8625) an ID for the uploaded imagein the database of the photo sharing site. The process stores (at 8630)the image ID for use in accessing the image on the web site, then ends.This image ID enables the application to contact the website and requestinformation about the uploaded image (e.g., in order to download thecomments). In some embodiments, the application stores the image ID inthe image data structure, as shown above by reference to FIG. 15.

In the process 8600 of some embodiments, when the user chooses to uploadan image, the application automatically uploads the image to thephoto-sharing website without any further interaction. However, someembodiments allow the user to further customize the upload. FIGS.87A-87C illustrate a user uploading an image to Facebook® over tenstages 8701-8710 of the GUI 8700. The GUI 8700 is similar to thepreviously shown GUI 8400 of some embodiments, including a sharingbutton 8705. The first stage 8705 illustrates that the user has alreadyselected the sharing button 8715, causing the application to display amenu of various different sharing options. In this case, the menuincludes several icons, for various different photo-sharing/social mediawebsites, as well as creating a journal. In some embodiments, this menuincludes additional sharing options such as beaming the image to anotherdevice, e-mailing the image, etc. As shown, the user selects the“Facebook” icon at stage 8701.

The selection of this option causes the application to display anadditional menu 8720 in the GUI 8700 at the second stage 8702. This menu8720 allows the user to determine which images should be shared. Theuser can select to share the entire album currently displayed in thethumbnail display area, the presently selected images, or a third optionto select new images, which in some embodiments brings up a dialog boxthrough which the user can select a set of images from the current album(or different albums, in some such embodiments) for sharing. In thiscase, the user chooses to share the one selected image.

In the third stage 103, the GUI 8700 now includes an image-sharingdialog box 8725 that enables the user to customize the upload of animage to the particular selected photo-sharing website (in this case,Facebook®). The dialog box 8725 includes a thumbnail image 8730, acaption box 8735, an add location item 8740, and a friend tagging item8745. In some embodiments, when a user shares multiple images, theapplication displays these items for each image selected for sharing. Inaddition, the dialog box 8725 includes a cancel option and a shareoption, enabling the user to cancel the sharing operation or beginactually uploading the images, respectively. Finally, the dialog box8725 includes an album selection button 8750, that enables the user toselect between different albums on the photo-sharing website (as opposedto albums within the image viewing and editing application) asdestinations for the shared images. As shown, in the third stage 8703,the user selects the album selection button 8750.

This selection results in the display of a menu (or picker) 8755 fromwhich the user can select different albums in the fourth stage 8704. Insome embodiments, the application (or the device on which theapplication operates) logs into the user's account on the photo-sharingwebsite (necessary to upload the images, as described above), andretrieves a list of the different albums the user has created on thewebsite. When the user selects button 8750 (or its equivalent), theapplication displays a list of the user's albums, as well as an optionto create a new album. Some embodiments pre-populate the picker with aparticular number of the most recent albums that the user has eithercreated or uploaded images to. In this case, the user selects the“Nature” album option, so that the photo of lightning will be uploadedto this album on Facebook®.

In the fifth stage 8705, the user selects the add location item 8740. Asshown in the sixth stage 8706, this selection results in the display ofa menu (or picker) 8760 from which the user can select differentlocations with which to tag the image. In some embodiments, theapplication (or the device on which the application operates) retrievesa list of different locations with which the user has previously taggedimages on the photo sharing website. As shown, the menu 8760 includesoptions to choose a previously created “Home” location, a new location,or the current location. In some embodiments, the image viewing andediting application, or another application on the device that operatesthe image viewing and editing application, uses a location detectionmechanism (e.g., GPS) to identify the user's location, and thencorrelates this location with a list of places (e.g., a restaurant,address, etc.) within a particular distance (e.g., 1 kilometer, 1 mile,etc.) of the identified current location. In addition, some embodimentsuse the GPS data stored with the image (e.g., within the Exif data) todetermine a location, and list places within a particular distance ofthe location at which the image was captured. The application thenprovides this as a current location option within the menu 8760. Someembodiments pre-populate the picker with a particular number of the mostrecent locations with which a user has tagged images. In this case, theuser selects the “Home” location tag.

In the seventh stage 8707, the user selects the friend tagging item8745. As shown in the eighth stage 8708, this selection results in thedisplay of a menu (or picker) 8765 that lists the user's friends withinthe context of the photo sharing website. Various photo-sharing/socialmedia websites allow users to have a network of friends, and someembodiments retrieve the list of these friends so that the user can tagtheir friends in images through the interface of the image viewing andediting application. Some embodiments pre-populate the picker with aparticular number of the most recently tagged friends of the user. Insome embodiments, the user can tag any number of friends that they wouldlike to. However, in this example, the user does not tag any friends,but instead selects within the caption box 8735.

The ninth stage 8709 illustrates that when the user selects within thecaption box (e.g., by tapping) the application overlays a touchscreenkeyboard 8770 in order for the user to enter a caption for the image. Insome embodiments, the keyboard is provided by the operating system ofthe device, and the application sends a request for the keyboard to theoperating system when the user taps within the caption box. In thiscase, the user has used the keyboard 8770 to type “Right outside myhouse!” within the caption box 8735, and selects the “return” button onthe keyboard in order to complete the caption. In the tenth stage 8710,the user selects the share button in order to share the photo along withthe caption. In some embodiments, this caption is used for thephoto-sharing site, but is not stored with the image within the imageviewing and editing application.

As described above by reference to FIG. 86, when a user selects an imagefor sharing to a photo-sharing website to which the image has previouslybeen uploaded, some embodiments allow the user to either upload theimage as a new image or replace the older image on the website. Inaddition, when replacing an image, some embodiments retrieve thecaption, tags, and/or other information from the website in order forthe user to update this accompanying information.

FIG. 88 illustrates a user selecting two images for upload to Facebook®,including an edited version of the image uploaded in FIGS. 87A-87C, overfour stages 8801-8804 of the GUI 8700. The first two stages 8801 and8802 are the same as stages 8701 and 8702, except that in this case thephoto of the lightning has been edited (as indicated by the toolbox iconoverlaid on its thumbnail) and a second image is also selected. Inaddition, the photo of the lightning has an icon overlaying itsthumbnail indicating that it is already shared to at least onephoto-sharing website.

After the user chooses to upload the selected images, the applicationdetermines whether any of the images are already uploaded. The datastructure for the images (e.g., as described by reference to FIG. 15above) indicates any locations to which the image is shared. Because oneof the images selected in this example is already shared to Facebook®,the application displays a dialog box 8805 indicating that the photo hasalready been shared, and allowing the user to choose whether to replacethe image, share the image (as a new image within the context of thephoto-sharing website), or cancel the upload. In this case, the userchooses to replace the image. In some embodiments, however, theapplication only brings up the dialog box 8805 if the user attempts toupload the image to the same album of the photo-sharing website as theprevious version.

As a result, in the fourth stage the application brings up animage-sharing dialog box 8810. This is similar to the dialog box 8725,but includes two separate sets of caption box, thumbnail, add locationitem, and friend tagging item. For the lightning bolt image, theapplication retrieves the caption and tagging information from thephoto-sharing website and displays this information as editable withinthe dialog box 8810. In this case, the caption and the location aredisplayed as editable information.

For images uploaded to photo-sharing websites, some embodimentsautomatically retrieve interactions with the images from those websites.FIG. 89 conceptually illustrates a process 8900 of some embodiments forretrieving comments posted to an image on a photo sharing or socialmedia website. The application of some embodiments performs the process8900 when an image currently displayed in the image display area of theapplication's GUI has been posted to a photo sharing site. Someembodiments only perform the comment retrieval process after displayingthe image in the display area for a set period of time (e.g., onesecond, five seconds, one minute, etc.).

As shown, the process 8900 begins by identifying (at 8905) that thecurrently displayed image has been posted to a photo sharing website.Some embodiments wait a particular time duration while displaying animage, then determine whether the image is shared anywhere. When theimage is not shared, the process 8900 will not be performed.Furthermore, when the image has been shared to several different sites,some embodiments perform the process 8900 or a variation thereof foreach site, or a subset of the sites.

The process 8900 retrieves (at 8910) the image ID used for the image inthe database of the photo sharing website. The application retrievesthis image ID from the data structure of the displayed image, in someembodiments. The process then sends (at 8915) a request for informationrelating to the image to the photo sharing site, using the retrievedimage ID to identify the image in the site's database. In someembodiments, this image ID is an object ID that identifies an objectcreated for the image in the site's database, and the applicationrequests certain properties of that object.

In response to sending the request, the process receives (at 8920) acomment stream and any additional requested information from the photosharing site. In some embodiments, the comment stream is received as aseries of comments that each includes a user making the comment, theuser's profile thumbnail, the comment text itself, and a timestamp.Other embodiments, however, receive and parse the tree structure ofnested comments. In addition, for images posted on Facebook® or siteswith similar features, some embodiments receive the number of “Likes” aposted image has received, as well as who liked the image.

With this information received, the process 8900 retrieves (at 8925) thelast access date of the comment stream for the image. The retrieved dateand time is the last time that the user viewed any comments for theimage within the image-viewing application. If the user has not viewedany comments on the image after uploading the image, then the retrievedtime will be that of upload. In some embodiments, whether the user hasviewed the comments on the image directly through the photo sharing sitedoes not affect the last access date.

The process then determines (at 8930) whether the retrieved last accessdate is earlier than the most recent comment in the comment stream. Theprocess compares the last access date to the timestamp for the mostrecent comment, and determines which is earlier. When the last accessdate is earlier, the process displays (at 8935) a notification to theuser that new comments are available. In some embodiments, thenotification consists of a small icon, or badge, over the informationbutton (used to access the comments). Some embodiments use anotification button that simply indicates that new comments areavailable, while other embodiments provide an indication (e.g., a numberinside the icon) of the number of new comments. In order to determinethe number of new comments, some embodiments compare the last accessdate to each successively older comment until reaching a comment priorto the last access date. After displaying the notification, ifnecessary, the process 8900 then ends.

Users can view these comments, in some embodiments, by accessing thecomments tab in the information window. Through this window, someembodiments also allow users to respond with additional comments thatare posted to the photo sharing website.

FIG. 90 illustrates a user posting such a comment through theinformation window over six stages 9010-9060 of the GUI 8400 of someembodiments. In the first stage 9010, the application displays the image8415, which the user had previously captioned and posted to Facebook®.In addition, the application displays a small icon 9005 over the infobutton 8505. This small icon indicates that the displayed image hasreceived two new comments. Some embodiments use the same icon fordifferent photo sharing websites, without differentiating between thedifferent sites. Other embodiments use different icons for Facebook®,Flickr®, etc. (e.g., different colors, different icon shapes, etc.).

In the second stage 9020, the user selects the info button 8505. As inFIGS. 81-83, this causes an information window 9015 to appear over thedisplay in stage 9030. The user then selects the comments tab. Thefourth stage 9040 displays the comments tab. As shown, the informationwindow 9015 now displays the Facebook® comments that “Paul Smith” haswritten on the user's image. This figure shows the info tab initiallydisplayed and the user then selecting the comments tab. However, someembodiments automatically display the comments tab in response to a userselecting the info button with a notification icon displayed, on theassumption that the user most likely wants to view the new comments. Theinformation window 9015 is larger in stage 9040 than in stage 9030, inorder to display all of the comments. In some embodiments, rather thanexpanding, the information window 9015 stays the same size andautomatically displays the comments with the first new comment at thetop of the window, with the user able to scroll through the commentstream.

In stage 9040, the comment stream also includes a section into which theuser can enter a comment. The user taps this section, and the fifthstage 9050 illustrates a touchscreen keyboard 8425 that appears as aresult. This allows the user to type a comment to post to Facebook® forthe image. After the user types her response, the information window8415 displays the new comment at the end of the comment stream in stage9060, indicating that the comment has been posted to Facebook®. In orderto post user comments, the application transmits the user comment withthe stored image ID to the photo sharing website along with the userinformation. In some embodiments, the application awaits a confirmationfrom the website before displaying the comment in the application GUI.

VII. Context-Sensitive Help

Some embodiments also include a context-sensitive help feature thatprovides indications for various user interface tools as to the functionof the tool. In some embodiments, the application determines for whichuser interface features the help information should be provided based onthe current active tools of the application. For instance, when a userselects a particular set of editing tools, the application removes someof the help information from the display while adding informationspecifically for the selected set of editing tools to the display.

FIG. 91 conceptually illustrates a state diagram 9100 of the GUI of someembodiments that presents various operations of the help feature. One ofordinary skill in the art will recognize that the state diagram 9100does not encompass every state of the image viewing and editing GUI, oreven every state related to the context-sensitive help feature, butinstead only a subset of the help feature operations within the GUI.

The state diagram 9100 will be described by reference to the UI examplesillustrated in FIGS. 92-96. Specifically, FIG. 92 illustrates a GUI 9200of the image editing application of some embodiments in multiple stagesrelated to the appearance of a help icon. FIGS. 93-96 illustrate the GUI9200 over multiple stages relating to the activation and display of thehelp feature as the user performs various operations within the GUI.

As shown in FIG. 91, the state diagram 9100 begins when a user opens theimage viewing, organizing, and editing application at state 9105. As theapplication opens, it transitions to either state 9110 or state 9115,depending on whether the help tool has previously been activated on thedevice on which the application operates. In some embodiments, the imageediting application stores a parameter with two states (e.g., 1 or 0) onthe device. Upon first being loaded on a device, the applicationinitializes the parameter in a first state (e.g., 0). Once a user hasactivated the help tool on the device, the application switches theparameter to the other state (e.g., 1). This way, the applicationdetermines whether the help tool has been activated on the device bychecking the parameter.

If the help tool has never been activated on the device (e.g., theparameter has a value of 0), then the GUI transitions to state 9110 uponthe application opening, at which the application displays the help iconin a conspicuous manner different from other GUI items of theapplication. In some embodiments, the help icon is a selectable UI item,which a user can select to activate the help tool. Different embodimentsof the help tool implement the conspicuous display of the help icondifferently. For instance, some embodiments display the help icon in aconspicuous manner by using a blinking help icon, or an icon thatappears as pulsating. The application displays the help icon as changingbetween a small first state and a larger second state—either blinkingbetween the two, or expanding and contracting to switch between the twostates.

FIG. 92 illustrates an example of the display of the help icon in aconspicuous manner in the GUI 9200 over three stages 9205-9215. Asshown, the GUI 9200 includes a thumbnail display area 9230, an imagedisplay area 9245, a menu bar 9240, a UI control display area 9260, anda tool bar 9235. The menu bar 9240 includes a set of selectable UI itemsfor invoking different sets of image editing tools, including aselectable UI item 9242 for invoking a set of image cropping tools, aselectable UI item 9244 for invoking a set of exposure adjustment tools,a selectable UI item 9246 for invoking a set of color adjustment tools,a selectable UI item 9248 for invoking a set of brush tools, and aselectable UI item 9250 for invoking a set of special effect tools. TheUI control display area 9260 is for displaying different sets of UIcontrols when they are invoked. In this example, the UI control displayarea 9260 includes the default set of UI items for the image viewingGUI, including a selectable UI item 9262 for initiating an auto enhanceoperation on the image, a selectable UI item 9264 for initiating arotate operation on the image, a selectable UI item 9266 for flaggingthe image, a selectable UI item 9268 for marking the image as favorite,and a selectable UI item 9270 for hiding the image.

The tool bar 9235 includes additional selectable items, including aselectable UI item 9232 for navigating back to the collectionorganization GUI, a selectable UI item 9250 (i.e., the help icon) forinvoking the help tool, a selectable UI item 9252 for displayinginvoking the information window for a displayed image, and a selectableUI item 9254 for toggling between original and edited versions of thedisplayed image.

In FIG. 92, the help tool has never been activated on the device, andtherefore the application displays the help icon in a conspicuousmanner. In this example, the application displays the help icon 9250 asthrobbing, or pulsing. As shown, the help icon includes a question markgraphic. This question mark expands and contracts in order to create thepulsating appearance. At the first stage 9205, the help icon has a largequestion mark that extends beyond the borders of the icon.

The second stage 9210 illustrates the GUI 9200 with the help icon 9250at its smallest state. As shown, the help icon 9250 is no longerhighlighted, as indicated by a small question mark on the icon that iscompletely enclosed by the border of the help icon 9250. To get from thefirst stage 9205 to the second stage 9210, the application quicklydecreases the size of the question mark part of the icon. In someembodiments, the second stage 9210 occurs only within a very shortperiod of time (e.g., 0.5 seconds) after the first stage 9205.

The third stage 9215 illustrates the GUI 9200 after the application hasagain increased the size of the question mark in the help icon 9250 toits largest point, similar to at stage 9205. In some embodiments, thetime for the application to get from the first stage 9205 to the secondstage 9210 is the same as the time to get from the second stage 9210 tothe third stage 9215. The application, in some embodiments, shrinks thesize of the help icon, then quickly expands the size of the icon, and soon. In some embodiments, the application displays the help icon in thismanner until the user has invoked the help feature at least once.

Referring back to FIG. 91, if the application determines that the helptool has been previously invoked on the device as the application opens,the help tool transitions to state 9115, where the GUI displays the helpicon in the same manner as other icons. That is, the help icon appearsin a normal state, similar to that shown in the second stage 9210 ofFIG. 92.

While at either state 9110 or state 9115, when the application receivesa selection of the help icon, the GUI transitions to state 9120, todisplay help indicators for (i) constant GUI items and (ii) thecurrently selected level of user tools. The GUI items, in someembodiments, include different sets of user tools. For example, someembodiments include the default tools (auto-enhance, rotate, flag,favorites, hide) as a first set, and then various sets of editing tools(e.g., crop tools, exposure tools, color adjustment tools, brush tools,and special effects tools). When the default tools are shown in the GUI,some embodiments display help indicators for the default tools as wellas for the various edit activation items (for activating the differentsets of editing tools). When one of the sets of editing tools isactivated, the application displays these tools in place of the defaulttools. If the help feature has been invoked, some embodiments do notdisplay help indicators for the different edit activation items, andinstead only display help indicators for the selected editing tools. Insome embodiments, the constant GUI items include items that are alwayspresent in the GUI, irrespective of which items are selected. Theseitems may include the toggle original button, the sharing button, theinfo button, and other GUI items.

In some embodiments, the application remains at state 9120 unless (1)the user selects a new set of editing tools, (2) the user moves one ofthe currently selected editing tools, or (3) the user selects the helpicon to deactivate the help feature. When a user selects a new set oftools, the application transitions to state 9125 to modify the currentlyselected level of user tools, then transitions back to state 9120 todisplay help indicators for the new currently selected level of tools.

FIG. 93 illustrates an example of invoking the context-sensitive helptool and changing the selected set of user tools in the GUI 9200 overthree different stages 9305-5715. The first stage 9305 is similar to thefirst stage 9205 of FIG. 92, except that the image display area 9245only includes a single image. The second stage 9310 illustrates the GUI9200 after the user has activated the help tool. In some embodiments,the help tool can be activated by a selection of the help icon. Asshown, the user has activated the help tool by tapping a finger on thehelp icon 9250. As a result of the selection, the application overlaysvarious help indicators over the GUI. These help indicators displayshort bits of explanatory information for various GUI items.

In the second stage 9310, the application displays help indicators 9325for the constantly displayed GUI items 9238, 9252, and 9254 within thetool bar 9235. These help indicators are labeled “Share” for the sharingbutton 9238, “Image info” for the information button 9252, and “ShowOriginal” for the toggle original button 9254, though variousembodiments may use different descriptions for one or more of the items.In addition, some embodiments only display the help indicators for itemsthat are selectable; when the user has not yet edited the displayedimage, the toggle original button will have no effect and therefore someembodiments do not display its help indicator. Some embodiments displaythe help indicators for different items in the toolbar 9235 (e.g., theundo button).

The help tool also displays a set of indicators 9335 for the currentlyselected level of user tools (“Auto-Enhance”, “Rotate”, “Flag”,“Favorite”, and “Hide”). In addition, when at this level of tools (thedefault set of user tools, shown when none of the edit activation itemshave been selected), the application displays help indicators 9330 forthe edit activation items 9242, 9244, 9246, 9248, and 9262, thatindicate to the user the different editing options (“Crop”, “Exposure”,“Color”, “Brush Tool”, and “Special Effects”). As with the constantlypresent GUI items, different embodiments may use different descriptionsfor the same item, or have a different set of GUI items. In someembodiments, the sets of help indicators are selectable UI items. Insuch embodiments, when a user selects a help indicator, the applicationoverlays more detailed information about the functions and operations ofthe corresponding GUI item.

Some embodiments display directions for use within the help indicatorsfor some of the items. For instance, in some embodiments, the “Rotate”indicator includes further information, such as “Rotate 90°. Touch andhold for more options”. As shown, the help indicators that theapplication overlays at 9310 include an indicator 9365 for the zoom toolin the center of the image display area that gives directions on usingthe zoom tool and an indicator 9375 for the thumbnail display areadescribing different types of selection inputs.

The third stage 9315 of FIG. 93 illustrates an example of the userselecting a new set of tools in the GUI 9200. As shown in the thirdstage 9315, the user has selected the selectable UI item 9244 in themenu bar 9240 for invoking a set of exposure adjustment tools. As aresult, the application displays a set of exposure adjustment tools inthe UI control display area 9260, replacing the auto-enhance, rotate,and tagging UI items. The set of exposure adjustment tools includes ashadows adjustment tool 9340, a set of contrast adjustment tools 9345and 9350, a brightness adjustment tool 9355, and a highlights adjustmenttool 9360. As a result of the user selecting a new set of tools, theoverlays a new set of help indicators 9370 (“Black point & Shadows”,“Contrast”, “Highlights”, “Contrast”, and “White point & Highlights”)for the newly displayed set of tools while removing the help indicators9330 for the various edit activation tools 9242, 9244, 9246, 9248, and9262. The application also overlays the indicator 9380 within the imagedisplay area to indicate that the user can adjust the exposure data forthe image by touching and dragging over the image itself. In addition,the help indicators 9325 for the share, image info, and toggle originalbuttons remain, irrespective of which set of GUI tools the user selects.

FIG. 94 illustrates another example of the modification of the helpfeature when the user selects a new set of tools within the GUI 9200 attwo different stages 9405 and 9410. The first stage 9405 is identical tothe second stage 9310 of FIG. 93. As shown, the help tool has beenactivated, as indicated by the appearance of the sets of help indicators9325, 9330, 9335, 9365, and 9375 in the GUI 9200. The second stage 9410illustrates the GUI 9200 after the user has selected a new set of toolsfor display in the GUI 9200. In this case, the user has selected theselectable UI item 9248 within the menu bar 9240 for invoking a set ofbrush tools. As such, the application displays the set of brush tools9425 for invoking different image adjustment operations in the GUI 9200.As a result of the user selecting a new set of tools, the help toolsalso displays a new set of help indicators 9430 for the new set of brushtools 9425, while removing the set of help indicators 9330 for thedifferent edit activation tools.

Returning to the stage diagram 9100 of FIG. 91, when the user moves oneof the currently selected tools while the application is at state 9120,the application transitions to state 9130 to move the help indicatoralong with the moving GUI tool. For instance, when the user moves aslider, that slider's help indicator moves along with it.

FIG. 95 illustrates an example of the application automatically moving ahelp indicator along with a corresponding edit tool at three stages9505-9515. The first stage 9505 is identical as the third stage 9315 ofFIG. 93, with the help tool activated and the exposure adjustment toolsselected. As shown, the application displays the set of help indicators9370 for the set of exposure adjustment tools 9340-9360. The secondstage 9510 illustrates the GUI 9200 as the user begins to contact thetouchscreen in order to move one of the exposure adjustment sliders. Thethird stage 9515 illustrates the movement of the contrast adjustmenttool 9345 by the user. As a result of this movement, the help indicator9370 (labeled “Contrast”) moves along with the tool to the right. Inaddition, moving one of the contrast tools causes the other contrasttool to move as well, and as such the other contrast slider 9350 movesto the left along with its help indicator. As a result of this movement,the contrast of the displayed image is modified.

Referring back to FIG. 91, when the user selects the help icon againafter the help tool is activated, the help tool removes all the helpindicators from the GUI. In addition, since the user has alreadyactivated the help tool on the device, the help tool returns to state9115, where the help tool displays the help icon in the same manner asother icons, as shown in stage 9305 of FIG. 93.

As mentioned above, when a user selects one of the help indicators, someembodiments display a detailed help article about the selected feature.Some embodiments either download these help articles from an externallocation (e.g., via the Internet) or store them with the application.

FIG. 96 illustrates an example of displaying a detailed help articlerelated to one of the GUI items through the GUI 9200 through threedifferent stages 9605-9610. The first stage 9605 is identical to thefirst stage 9405 of FIG. 94, with the help tool activated, as indicatedby the display of the help indicators for the GUI items shown on the GUI9200. When a user selects one of the help indicators, the applicationdisplays more detailed information about the functions and operationsthat are related to the corresponding GUI item.

The second stage 9410 illustrates the user selecting one of the helpindicators. Specifically, the user selects (e.g., via a tap as shown,via a click selection, etc.) the help indicator for the crop item 9242,causing the application to highlight the crop indicator.

As a result of the selection, the application overlays detailed helpinformation 9630 for the crop tools over the GUI 9200 at stage 9615. Asstated, in some embodiments, the content of the detailed helpinformation is stored on the device on which the image editingapplication is executed. In these embodiments, when the user selects ahelp indicator, the application retrieves the corresponding helpinformation from the device before displaying the information on GUI9200. In other embodiments, the detailed help information is stored atone or more remote locations to which the device connects through anetwork (e.g., the Internet). In these embodiments, when the userselects a help indicator, the application retrieves the detailed helpinformation from one of these remote locations through the networkbefore displaying the information on GUI 9200.

FIG. 97 illustrates another example of the display of help indicatorsfor different GUI items in some embodiments. Specifically, FIG. 97illustrates the movement of help indicators as well as multiple levelsof help indicators for color adjustment tools over four stages 9710-9740of the GUI 9300. The first stage 9710 is identical to the first stage9405 of FIG. 94, with the help tool activated, as indicated by thedisplay of the help indicators for the GUI items shown in the GUI 9200.

The second stage 9720 illustrates the GUI 9200 after the user selectsthe color adjustment activation item 9246. This causes the applicationto display four color adjustment sliders in the toolbar 9260. As shownby help indicators 9705, these sliders enable the user to adjust thesaturation, sky colors, green colors, and skin tones of the displayedimage. In addition, the color adjustment tools include a white balanceitem 9715, indicated by the help indicator 9725.

At the third stage 9730, the user moves the blue skies slider 9745 tothe right, in order to increase saturation in the sky colors of theimage. This also causes the help indicator 9705 for the slider 9745 tomove to the right. In doing so, the indicator begins to overlap with thehelp indicator for the greenery slider. As a result, the applicationautomatically moves the greenery slider help indicator upwards (using alonger stem), so that the user can see the entire help indicator.

The fourth stage 9740 illustrates the result of the user selecting thewhite balance item 9715. As shown, the application overlays a toolbar9750 that provides numerous selectable white balancing options. Withthese items displayed, the application removes the help indicators 9705for the color adjustment sliders, and instead overlays the indicators9755 for the different white balance items.

VIII. Software Architecture

In some embodiments, the processes described above are implemented assoftware running on a particular machine, such as a computer or ahandheld device, or stored in a machine-readable medium. FIG. 98conceptually illustrates the software architecture of an image viewing,editing, and organization application 9800 of some embodiments. In someembodiments, the image viewing, editing, and organization application isa stand-alone application or is integrated into another application,while in other embodiments the application might be implemented withinan operating system. Furthermore, in some embodiments, the applicationis provided as part of a server-based solution. In some suchembodiments, the application is provided via a thin client. That is, theapplication runs on a server while a user interacts with the applicationvia a separate machine remote from the server. In other suchembodiments, the application is provided via a thick client. That is,the application is distributed from the server to the client machine andruns on the client machine.

The image viewing, editing, and organization application 9800 includes auser interface (UI) interaction and generation module 9805, a mediaingest module 9810, a histogram generator 9815, editing modules 9820, animage processor 9825, an image display area generator 9830, an imageselector 9835, an image tagger 9840, an image comparator 9845, and asharing manager 9850. The figure also illustrates stored data associatedwith the application 9800: source images 9855, image data 9860,collections data 9865, and cached images 9870.

In some embodiments, the source images 9835 store image files (and,possibly, video files or other media) imported into the application(i.e., the local image database). In some embodiments, the image filesmay be associated with another image viewing and organizationapplication with which the application 9800 communicates. The image data9860 stores the image data structures of some embodiments, while thecollection data 9865 stores the collection data (e.g., albums, events,journals, etc.). The cached images 9870 stores cached versions of theimages (e.g., thumbnails, display size images, etc.). In someembodiments, the four sets of data 9855-9870 are stored in one physicalstorage (e.g., an internal hard drive, external hard drive, solid statememory, etc.). In some embodiments, the data may be split betweenmultiple physical storages.

FIG. 98 also illustrates an operating system 9875 that includes inputdevice driver(s) 9880, display module 9885, media import module 9890,and network interface(s) 9895. In some embodiments, as illustrated, thedevice drivers 9880, display module 9885, media import module 9890, andnetwork interface 9895 are part of the operating system even when themedia editing application 9800 is an application separate from theoperating system.

The input device drivers 9860 may include drivers for translatingsignals from a touchscreen, as well as a keyboard, mouse, touchpad,tablet, etc. A user interacts with one or more of these input devices,which send signals to their corresponding device driver. The devicedriver then translates the signals into user input data that is providedto the UI interaction and generation module 9805.

The present application describes a graphical user interface thatprovides users with numerous ways to perform different sets ofoperations and functionalities. In some embodiments, these operationsand functionalities are performed based on different commands that arereceived from users through different types of touchscreen devices. Forexample, the present application illustrates the use of touchscreeninput (e.g., with one or more fingers) to control (e.g., select, move)objects in the graphical user interface. However, in some embodiments,objects in the graphical user interface can also be controlled ormanipulated through other controls, such as a cursor. In someembodiments, cursor control is implemented through an input device thatmoves a cursor to different locations on the display of the device.Based on the location of the cursor, different input (e.g., mouse buttonclicks, etc.) can be used to perform different actions (e.g., selectionof a GUI item). Thus, while many of the figures above do not illustratea cursor, some embodiments perform the same actions with the use of acursor (with or without touch control).

The display module 9885 translates the output of a user interface for adisplay device. That is, the display module 9885 receives signals (e.g.,from the UI interaction and generation module 9805) describing whatshould be displayed and translates these signals into pixel informationthat is sent to the display device. The display device may be an LCD,plasma screen, CRT monitor, touchscreen, etc. In some touchscreenembodiments, the display module 9885 and the input device driver(s) 9880are part of a single touchscreen driver.

The media import module 9890 receives media files (e.g., image files,etc.) from external storage devices (e.g., external drives, recordingdevices, etc.) through one or more ports (e.g., a USB port, Firewireport, etc.) of the device on which the media-editing application 9800operates and translates this media data for the application 9800 orstores the data directly onto a storage of the device.

The UI interaction and generation module 9805 of the media editingapplication 9800 interprets the user input data received from the inputdevice drivers and passes it to various modules, including the mediaingest module 9810, the editing modules 9820, the image processor 9825,the image display area generator 9830, the image selector 9835, and theimage tagger 9840. The UI interaction module also manages the display ofthe media-editing application GUI, and outputs this display informationto the display module 9865. This UI display information may be based oninformation from the editing modules 9815, the timeline generator 9820,the angle viewer generator 9827, the playback module 9830, the data9835-9850, etc. In addition, the module 9805 may generate portions ofthe UI based solely on user input—e.g., when a user moves an item in theUI that only affects the display rather than any of the other modules,such as moving a window from one side of the UI to the other ormodifying the relative size of the clip browser and clip library. Insome embodiments, the UI interaction and generation module 9805generates a basic GUI and populates the GUI with information from theother modules and stored data.

The media ingest module 9810 manages the import of source media into theapplication 9800. Some embodiments, as shown, receive source media fromthe media import module 9890 of the operating system 9875. The mediaingest module 9810 receives instructions through the UI module 9805 asto which files should be imported, then instructs the media importmodule 9890 to enable this import (e.g., from an external drive, anexternal camera, a camera of the device on which the applicationoperates, a different application on the device, etc.). The media ingestmodule 9810 of some embodiments stores these images in the source images9855. In some embodiments, the media ingest module 9810 also manages thecreation of image data structures upon import of source images.

The histogram generator 9815 generates color, texture, and shapehistograms for each imported image in some embodiments. The histogramgenerator 9815 of some embodiments is described in detail above byreference to FIG. 52.

The editing modules 9815 include a variety of modules for editingimages. The editing modules 9815 generate various editing GUI tools andtranslate input from these tools into edit instructions for an image(e.g., crop instructions, rotation instructions, color adjustmentinstructions, etc.). The image processor 9825 applies edit instructionsto an image when the image needs to be output. For instance, when a useradds an edit to a displayed image, the appropriate one of the editingmodules 9820 modifies the edit instructions for the image, and the imageprocessor 9825 applies these instructions in order to generate thedesired image.

The image display area generator 9830 handles the generation of theimage display area. The image display area generator 9830 receives(e.g., from the UI interaction and generation module 9805 or the imageselector 9835) a set of images to display. The generator 9830 of someembodiments calculates the average aspect ratio of the images, defines agrid in the image display area, calculates the number of pixels to usefor displaying the images, and calculates the size for each image.

The image selector 9835 translates various user interactions intoselections of one or more images to send to the image display areagenerator 9830. When the user requests a set of similar images to aparticular image, the image selector uses the image comparator 9845 toidentify the similar images. The image comparator 9845 of someembodiments is described above by reference to FIG. 52. The image tagger9840 receives user input to tag one or more images and modifies the datastructures of the images accordingly.

The sharing manager 9850 manages the sharing of images on various photosharing websites (e.g., Facebook®, Twitter®, Flickr®, etc.). In someembodiments, the sharing manager 9850 connects to these websites throughthe network interface(s) 9895 in order to upload images, receive andstore the object ID for an uploaded image, and receive/upload commentson the image.

While many of the features of media-editing application 9800 have beendescribed as being performed by one module (e.g., the UI interaction andgeneration module 9805, the media ingest module 9810, etc.), one ofordinary skill in the art will recognize that the functions describedherein might be split up into multiple modules. Similarly, functionsdescribed as being performed by multiple different modules might beperformed by a single module in some embodiments (e.g., the imagedisplay area generator 9830 and image selector 9835 might be part of theUI interaction and generation module 9805).

IX. Electronic Systems

Many of the above-described features and applications are implemented assoftware processes that are specified as a set of instructions recordedon a computer readable storage medium (also referred to as computerreadable medium). When these instructions are executed by one or morecomputational or processing unit(s) (e.g., one or more processors, coresof processors, or other processing units), they cause the processingunit(s) to perform the actions indicated in the instructions. Examplesof computer readable media include, but are not limited to, CD-ROMs,flash drives, random access memory (RAM) chips, hard drives, erasableprogrammable read-only memories (EPROMs), electrically erasableprogrammable read-only memories (EEPROMs), etc. The computer readablemedia does not include carrier waves and electronic signals passingwirelessly or over wired connections.

In this specification, the term “software” is meant to include firmwareresiding in read-only memory or applications stored in magnetic storagewhich can be read into memory for processing by a processor. Also, insome embodiments, multiple software inventions can be implemented assub-parts of a larger program while remaining distinct softwareinventions. In some embodiments, multiple software inventions can alsobe implemented as separate programs. Finally, any combination ofseparate programs that together implement a software invention describedhere is within the scope of the invention. In some embodiments, thesoftware programs, when installed to operate on one or more electronicsystems, define one or more specific machine implementations thatexecute and perform the operations of the software programs.

A. Mobile Device

The image editing and viewing applications of some embodiments operateon mobile devices. FIG. 99 is an example of an architecture 9900 of sucha mobile computing device. Examples of mobile computing devices includesmartphones, tablets, laptops, etc. As shown, the mobile computingdevice 9900 includes one or more processing units 9905, a memoryinterface 9910 and a peripherals interface 9915.

The peripherals interface 9915 is coupled to various sensors andsubsystems, including a camera subsystem 9920, a wireless communicationsubsystem(s) 9925, an audio subsystem 9930, an I/O subsystem 9935, etc.The peripherals interface 9915 enables communication between theprocessing units 9905 and various peripherals. For example, anorientation sensor 9945 (e.g., a gyroscope) and an acceleration sensor9950 (e.g., an accelerometer) is coupled to the peripherals interface9915 to facilitate orientation and acceleration functions.

The camera subsystem 9920 is coupled to one or more optical sensors 9940(e.g., a charged coupled device (CCD) optical sensor, a complementarymetal-oxide-semiconductor (CMOS) optical sensor, etc.). The camerasubsystem 9920 coupled with the optical sensors 9940 facilitates camerafunctions, such as image and/or video data capturing. The wirelesscommunication subsystem 9925 serves to facilitate communicationfunctions. In some embodiments, the wireless communication subsystem9925 includes radio frequency receivers and transmitters, and opticalreceivers and transmitters (not shown in FIG. 99). These receivers andtransmitters of some embodiments are implemented to operate over one ormore communication networks such as a GSM network, a Wi-Fi network, aBluetooth network, etc. The audio subsystem 9930 is coupled to a speakerto output audio (e.g., to output different sound effects associated withdifferent image operations). Additionally, the audio subsystem 9930 iscoupled to a microphone to facilitate voice-enabled functions, such asvoice recognition, digital recording, etc.

The I/O subsystem 9935 involves the transfer between input/outputperipheral devices, such as a display, a touch screen, etc., and thedata bus of the processing units 9905 through the peripherals interface9915. The I/O subsystem 9935 includes a touch-screen controller 9955 andother input controllers 9960 to facilitate the transfer betweeninput/output peripheral devices and the data bus of the processing units9905. As shown, the touch-screen controller 9955 is coupled to a touchscreen 9965. The touch-screen controller 9955 detects contact andmovement on the touch screen 9965 using any of multiple touchsensitivity technologies. The other input controllers 9960 are coupledto other input/control devices, such as one or more buttons. Someembodiments include a near-touch sensitive screen and a correspondingcontroller that can detect near-touch interactions instead of or inaddition to touch interactions.

The memory interface 9910 is coupled to memory 9970. In someembodiments, the memory 9970 includes volatile memory (e.g., high-speedrandom access memory), non-volatile memory (e.g., flash memory), acombination of volatile and non-volatile memory, and/or any other typeof memory. As illustrated in FIG. 99, the memory 9970 stores anoperating system (OS) 9972. The OS 9972 includes instructions forhandling basic system services and for performing hardware dependenttasks.

The memory 9970 also includes communication instructions 9974 tofacilitate communicating with one or more additional devices; graphicaluser interface instructions 9976 to facilitate graphic user interfaceprocessing; image processing instructions 9978 to facilitateimage-related processing and functions; input processing instructions9980 to facilitate input-related (e.g., touch input) processes andfunctions; audio processing instructions 9982 to facilitateaudio-related processes and functions; and camera instructions 9984 tofacilitate camera-related processes and functions. The instructionsdescribed above are merely exemplary and the memory 9970 includesadditional and/or other instructions in some embodiments. For instance,the memory for a smartphone may include phone instructions to facilitatephone-related processes and functions. The above-identified instructionsneed not be implemented as separate software programs or modules.Various functions of the mobile computing device can be implemented inhardware and/or in software, including in one or more signal processingand/or application specific integrated circuits.

While the components illustrated in FIG. 99 are shown as separatecomponents, one of ordinary skill in the art will recognize that two ormore components may be integrated into one or more integrated circuits.In addition, two or more components may be coupled together by one ormore communication buses or signal lines. Also, while many of thefunctions have been described as being performed by one component, oneof ordinary skill in the art will realize that the functions describedwith respect to FIG. 99 may be split into two or more integratedcircuits.

B. Computer System

FIG. 100 conceptually illustrates another example of an electronicsystem 10000 with which some embodiments of the invention areimplemented. The electronic system 10000 may be a computer (e.g., adesktop computer, personal computer, tablet computer, etc.), phone, PDA,or any other sort of electronic or computing device. Such an electronicsystem includes various types of computer readable media and interfacesfor various other types of computer readable media. Electronic system10000 includes a bus 10005, processing unit(s) 10010, a graphicsprocessing unit (GPU) 10015, a system memory 10020, a network 10025, aread-only memory 10030, a permanent storage device 10035, input devices10040, and output devices 10045.

The bus 10005 collectively represents all system, peripheral, andchipset buses that communicatively connect the numerous internal devicesof the electronic system 10000. For instance, the bus 10005communicatively connects the processing unit(s) 10010 with the read-onlymemory 10030, the GPU 10015, the system memory 10020, and the permanentstorage device 10035.

From these various memory units, the processing unit(s) 10010 retrievesinstructions to execute and data to process in order to execute theprocesses of the invention. The processing unit(s) may be a singleprocessor or a multi-core processor in different embodiments. Someinstructions are passed to and executed by the GPU 10015. The GPU 10015can offload various computations or complement the image processingprovided by the processing unit(s) 10010. In some embodiments, suchfunctionality can be provided using CoreImage's kernel shading language.

The read-only-memory (ROM) 10030 stores static data and instructionsthat are needed by the processing unit(s) 10010 and other modules of theelectronic system. The permanent storage device 10035, on the otherhand, is a read-and-write memory device. This device is a non-volatilememory unit that stores instructions and data even when the electronicsystem 10000 is off. Some embodiments of the invention use amass-storage device (such as a magnetic or optical disk and itscorresponding disk drive) as the permanent storage device 10035.

Other embodiments use a removable storage device (such as a floppy disk,flash memory device, etc., and its corresponding drive) as the permanentstorage device Like the permanent storage device 10035, the systemmemory 10020 is a read-and-write memory device. However, unlike storagedevice 10035, the system memory 10020 is a volatile read-and-writememory, such a random access memory. The system memory 10020 stores someof the instructions and data that the processor needs at runtime. Insome embodiments, the invention's processes are stored in the systemmemory 10020, the permanent storage device 10035, and/or the read-onlymemory 10030. For example, the various memory units include instructionsfor processing multimedia clips in accordance with some embodiments.From these various memory units, the processing unit(s) 10010 retrievesinstructions to execute and data to process in order to execute theprocesses of some embodiments.

The bus 10005 also connects to the input and output devices 10040 and10045. The input devices 10040 enable the user to communicateinformation and select commands to the electronic system. The inputdevices 10040 include alphanumeric keyboards and pointing devices (alsocalled “cursor control devices”), cameras (e.g., webcams), microphonesor similar devices for receiving voice commands, etc. The output devices10045 display images generated by the electronic system or otherwiseoutput data. The output devices 10045 include printers and displaydevices, such as cathode ray tubes (CRT) or liquid crystal displays(LCD), as well as speakers or similar audio output devices. Someembodiments include devices such as a touchscreen that function as bothinput and output devices.

Finally, as shown in FIG. 100, bus 10005 also couples electronic system10000 to a network 10025 through a network adapter (not shown). In thismanner, the computer can be a part of a network of computers (such as alocal area network (“LAN”), a wide area network (“WAN”), or an Intranet,or a network of networks, such as the Internet. Any or all components ofelectronic system 10000 may be used in conjunction with the invention.

Some embodiments include electronic components, such as microprocessors,storage and memory that store computer program instructions in amachine-readable or computer-readable medium (alternatively referred toas computer-readable storage media, machine-readable media, ormachine-readable storage media). Some examples of such computer-readablemedia include RAM, ROM, read-only compact discs (CD-ROM), recordablecompact discs (CD-R), rewritable compact discs (CD-RW), read-onlydigital versatile discs (e.g., DVD-ROM, dual-layer DVD-ROM), a varietyof recordable/rewritable DVDs (e.g., DVD-RAM, DVD-RW, DVD+RW, etc.),flash memory (e.g., SD cards, mini-SD cards, micro-SD cards, etc.),magnetic and/or solid state hard drives, read-only and recordableBlu-Ray® discs, ultra density optical discs, any other optical ormagnetic media, and floppy disks. The computer-readable media may storea computer program that is executable by at least one processing unitand includes sets of instructions for performing various operations.Examples of computer programs or computer code include machine code,such as is produced by a compiler, and files including higher-level codethat are executed by a computer, an electronic component, or amicroprocessor using an interpreter.

While the above discussion primarily refers to microprocessor ormulti-core processors that execute software, some embodiments areperformed by one or more integrated circuits, such as applicationspecific integrated circuits (ASICs) or field programmable gate arrays(FPGAs). In some embodiments, such integrated circuits executeinstructions that are stored on the circuit itself. In addition, someembodiments execute software stored in programmable logic devices(PLDs), ROM, or RAM devices.

As used in this specification and any claims of this application, theterms “computer”, “server”, “processor”, and “memory” all refer toelectronic or other technological devices. These terms exclude people orgroups of people. For the purposes of the specification, the termsdisplay or displaying means displaying on an electronic device. As usedin this specification and any claims of this application, the terms“computer readable medium,” “computer readable media,” and “machinereadable medium” are entirely restricted to tangible, physical objectsthat store information in a form that is readable by a computer. Theseterms exclude any wireless signals, wired download signals, and anyother ephemeral signals.

While the invention has been described with reference to numerousspecific details, one of ordinary skill in the art will recognize thatthe invention can be embodied in other specific forms without departingfrom the spirit of the invention. For instance, many of the figuresillustrate various touch gestures (e.g., taps, double taps, swipegestures, press and hold gestures, etc.). However, many of theillustrated operations could be performed via different touch gestures(e.g., a swipe instead of a tap, etc.) or by non-touch input (e.g.,using a cursor controller, a keyboard, a touchpad/trackpad, a near-touchsensitive screen, etc.). In addition, a number of the figures (includingFIGS. 7, 34, 43, 47, 53, 59, 79, 86, and 89) conceptually illustrateprocesses. The specific operations of these processes may not beperformed in the exact order shown and described. The specificoperations may not be performed in one continuous series of operations,and different specific operations may be performed in differentembodiments. Furthermore, the process could be implemented using severalsub-processes, or as part of a larger macro process. Thus, one ofordinary skill in the art would understand that the invention is not tobe limited by the foregoing illustrative details, but rather is to bedefined by the appended claims.

We claim:
 1. A machine readable medium storing an image-viewingapplication for execution by at least one processing unit, theimage-viewing application comprising sets of instructions for:displaying a first selection indication for first and second selectedthumbnails in a thumbnail display area while displaying, in an imagedisplay area, first and second images corresponding to the selectedthumbnails; receiving a selection of the displayed first image throughthe image display area; and in response to the selection of thedisplayed first image: displaying only the first image in the imagedisplay area; and displaying a second selection indication for the firstthumbnail in the thumbnail display area while maintaining the firstselection indication for the second thumbnail.
 2. The machine readablemedium of claim 1, wherein the first and second selection indicationsboth comprise highlighted borders around the thumbnails.
 3. The machinereadable medium of claim 2, wherein the second selection indicationcomprises a heavier highlight than the first selection indication. 4.The machine readable medium of claim 1, wherein the image-viewingapplication further comprises sets of instructions for: receiving, withonly the first image displayed in the image display area and the secondthumbnail selected, a second selection of the first image through theimage display area; and in response to the second selection: displayingthe first and second images in the image display area; and displayingthe first selection indication for both the first and second selectedthumbnails.
 5. The machine readable medium of claim 1, wherein theimage-viewing application further comprises sets of instructions for:receiving, with the first and second images both displayed in the imagedisplay area, a selection of the first thumbnail; and in response to theselection of the first thumbnail: displaying only the first image in theimage display area; and displaying a second selection indication for thefirst thumbnail in the thumbnail display area while maintaining thefirst selection indication for the second thumbnail.
 6. The machinereadable medium of claim 1, wherein the image-viewing applicationfurther comprises sets of instructions for: receiving, with the firstand second images both displayed in the image display area, a selectionof a third thumbnail without any selection indication; and in responseto the selection of the third thumbnail: displaying only a third imagecorresponding to the third thumbnail in the image display area; anddisplaying the second selection indication for the third thumbnail whileremoving the first selection indication for the second thumbnail.
 7. Amachine readable medium storing an image-viewing application forexecution by at least one processing unit, the image-viewing applicationcomprising sets of instructions for: displaying a thumbnail gridcomprising a plurality of ordered thumbnails, wherein a subset of theplurality of thumbnails are selected, the subset comprising at leastfirst and second thumbnails that are not contiguous in the order;displaying, in an image display area, a first image corresponding to thefirst thumbnail; receiving a horizontal swipe gesture over the firstimage in the image display area; and in response to the horizontal swipegesture, displaying a second image corresponding to the second thumbnailin the image display area.
 8. The machine readable medium of claim 7,wherein the horizontal swipe gesture is a leftward swipe gesture.
 9. Themachine readable medium of claim 8, wherein the subset comprises a thirdselected thumbnail, wherein the image-viewing application furthercomprises sets of instructions for: with the first image displayed inthe image display area, receiving a rightward swipe gesture over thefirst image; and in response to the rightward swipe gesture, displayinga third image corresponding to the third thumbnail in the image displayarea.
 10. The machine readable medium of claim 7, wherein the set ofinstructions for displaying a second image in response to the horizontalswipe gesture comprises a set of instructions for removing the firstimage from the image display area while adding the second image to theimage display area.
 11. The machine readable medium of claim 10, whereinthe set of instructions for removing the first image while adding thesecond image comprises sets of instructions for reducing a size of thefirst image while increasing a size of the second image.
 12. The machinereadable medium of claim 10, wherein each of the selected images isassigned a location within the image display area, the set ofinstructions for displaying the first image comprises a set ofinstructions for displaying a faded version of the second image, in itsassigned location, behind the displayed first image, and the set ofinstructions for removing the first image while adding the second imagecomprises sets of instructions for: minimizing the first image to itsassigned location within the image display area; and maximizing thesecond image from its assigned location within the image display area.13. The machine readable medium of claim 12, wherein the faded versionof the second image is only visible when at least a portion of theassigned location of the second image is not occupied by the displayedfirst image.
 14. The machine readable medium of claim 10, wherein theset of instructions for removing the first image while adding the secondimage comprises sets of instructions for sliding the first image out ofthe image display area.
 15. The machine readable medium of claim 7,wherein the image-viewing application is for execution on a touchscreendevice and the horizontal swipe gesture is a touch gesture.
 16. Amachine readable medium storing an image-viewing application forexecution by at least one processing unit, the image-viewing applicationcomprising sets of instructions for: displaying a thumbnail gridcomprising a plurality of thumbnails, wherein a subset of the pluralityof thumbnails are selected, the subset comprising at least first andsecond thumbnails; displaying, in an image display area, a first imagecorresponding to the first thumbnail; receiving a vertical swipe gestureover the first image in the image display area; and in response to thevertical swipe gesture: displaying a second image corresponding to thesecond thumbnail in the image display area; and removing the firstthumbnail from the selected subset of thumbnails.
 17. The machinereadable medium of claim 16, wherein the image-viewing applicationcomprises sets of instructions for: with the first image displayed inthe image display area, receiving a particular selection gesture of thefirst thumbnail; and in response to the particular selection gesture,executing the sets of instructions for displaying a second imagecorresponding to the second thumbnail in the image display area andremoving the first thumbnail from the selected subset of thumbnails. 18.The machine readable medium of claim 17, wherein the particularselection gesture is a press and hold selection of the first thumbnail.19. The machine readable medium of claim 16, wherein the image-viewingapplication is for execution on a touchscreen device and the verticalswipe gesture is a touch gesture.
 20. A machine readable medium storingan image-viewing application for execution by at least one processingunit, the image-viewing application comprising sets of instructions for:displaying a thumbnail grid comprising a set of thumbnails, wherein aplurality of the thumbnails; receiving a selection of a GUI tool fortagging selected images; when only one of the selected images isdisplayed in an image display area, tagging only the displayed image;and when all of the selected images are displayed in the image displayarea, tagging each of the selected images.
 21. The machine readablemedium of claim 20, wherein the tag is a favorites tag.
 22. The machinereadable medium of claim 20, wherein the tag is a flagged tag.
 23. Themachine readable medium of claim 20, wherein the tag is a hide imagetag.
 24. The machine readable medium of claim 45, wherein theimage-viewing application further comprises a set of instructions foradding the tagged images to a collection of images with the particulartag.